/* ============================================================================
   FLAT DESIGN TOKENS (RPG maro) — fara gradiente decorative; doar culori plate.
   Panouri:      bg #251c15 | header/inset #1c140e | slot adanc #0e0b08/#0f0b07
   Randuri lista: bg #1a130c | bordura #2a1f12 | hover #6b5232 | selectat #c8a04a pe #241b12
   Borduri:      normal #4a3826 | hover #6b5232/#7a5c3a | gold #c8a04a | gold tare #f0c040
   Text:         primar #e2d9cc | muted #9a8568 | gold #f0c040/#e6c84a
   Taburi:       inactiv #1f1710 + text #9a8568 | activ #332619 + text #e6c84a + bordura #8a6a3e
   Semantic:     good #2e7d32/#7ad07a | danger #7a2420/#c0392b | premium #6a3294/#7a3aa8 | info #173247/#2f6fb0
   Bare progres: XP/gold #d8a93a | HP #c62828/#2e7d32 | MP #1565c0/#2f6fb0 | premium #7a3aa8
   Butoane:      .rpg-btn = umplere plata + bordura-jos groasa (bevel); activ = translateY + bordura redusa.
   ============================================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; touch-action: manipulation; /* fara double-tap-zoom pe TOATE elementele (iOS ignora user-scalable=no si nu mosteneste touch-action de la parinte) */ }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0d0f12; color: #e8e4d8; font-family: 'MedievalSharp', 'Cinzel', Georgia, serif; touch-action: manipulation; } /* manipulation = fara double-tap zoom (iOS ignora user-scalable=no); joystick-ul isi pastreaza touch-action:none */

.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }

#screen-auth {
  background-image: url("/assets/login_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end;
  padding-right: 8%;
  /* daca panoul (buton Discord/Google + conturi rapide) e mai inalt decat fereastra, deruleaza in loc sa taie */
  overflow-y: auto;
  align-items: center;
}

#screen-chars {
  background-image: url("/assets/login_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  justify-content: flex-end;
  padding-right: 8%;
  overflow-y: auto;
  align-items: center;
}

/* Ferestre inguste (app redimensionat / mobil): panoul se centreaza si nu mai e impins in dreapta unde se taie. */
@media (max-width: 720px) {
  #screen-auth, #screen-chars { justify-content: center; padding-right: 0; padding-left: 0; }
  .auth-panel, .chars-panel { width: min(340px, 92vw); }
}
/* Ferestre SCUNDE: in loc sa taiem/scrolam, MICSORAM panoul proportional ca sa incapa intreg. */
@media (max-height: 820px) { .auth-panel, .chars-panel { transform: scale(0.9); } }
@media (max-height: 720px) { .auth-panel, .chars-panel { transform: scale(0.8); } }
@media (max-height: 620px) { .auth-panel, .chars-panel { transform: scale(0.68); } }
@media (max-height: 520px) { .auth-panel, .chars-panel { transform: scale(0.56); } }

.panel {
  background: #251c15; border: 3px solid #6b5232; border-radius: 6px;
  padding: 24px; box-shadow: 5px 5px 0 #120e0a, 0 12px 40px rgba(0,0,0,.7);
}
.auth-panel, .chars-panel {
  width: 320px; display: flex; flex-direction: column; gap: 10px; text-align: center;
  background: #1c120c !important;
  border: 4px solid #8e6844 !important;
  box-shadow: 0 0 0 4px #3c2718, 0 15px 35px rgba(0,0,0,0.9) !important;
  border-radius: 0px !important;
}
.chars-panel {
  width: 420px;
}
.auth-panel h1, .chars-panel h2 {
  font-family: 'MedievalSharp', 'Cinzel', serif;
  letter-spacing: 4px;
  color: #f0c040 !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  font-weight: 900;
  margin-bottom: 2px;
}
.subtitle { color: #bca080; font-size: 13px; margin-bottom: 8px; }

/* Base input definition */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  background: #0f0b07; border: 2px solid #4a3826; border-radius: 4px;
  color: #e8e4d8; padding: 9px 12px; font-size: 14px; outline: none; width: 100%;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.55);
}
input:not([type="range"]):focus { border-color: #f0c040; }

/* Themed Input for Auth & Chars */
.auth-panel input:not([type="range"]), .chars-panel input:not([type="range"]) {
  background: #0d0805 !important;
  border: 2px solid #5c4839 !important;
  border-radius: 0px !important;
  color: #f5eedc !important;
  padding: 9px 12px; font-size: 14px; outline: none; width: 100%;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.85) !important;
}
.auth-panel input:not([type="range"]):focus, .chars-panel input:not([type="range"]):focus {
  border-color: #f0c040 !important;
}

/* Base button definition */
button {
  background: #8c6239; color: #ffffff; border: 2px solid #3e281c;
  border-bottom: 5px solid #2a1b12; border-radius: 4px;
  padding: 9px 14px; font-size: 14px; font-weight: 700; cursor: pointer;
  text-shadow: 0 1px 2px #000; text-transform: uppercase; letter-spacing: 0.5px;
  transition: transform 0.05s, border-bottom-width 0.05s, background-color 0.1s;
}
button:hover { background: #a17246; }
button:active { transform: translateY(3px); border-bottom-width: 2px; }
button.secondary {
  background: #555555; border-color: #333333; border-bottom: 5px solid #222222;
  color: #ffffff;
}
button.secondary:hover { background: #666666; }
button.secondary:active { transform: translateY(3px); border-bottom-width: 2px; }
button.small { padding: 3px 9px; font-size: 12px; border-bottom-width: 3px; }
button.small:active { transform: translateY(2px); border-bottom-width: 1px; }
button:disabled { opacity: .4; cursor: default; }

/* Themed Button for Auth & Chars */
.auth-panel button, .chars-panel button {
  background: #6e482f !important;
  color: #fcefd2 !important;
  border: 2px solid #8e6844 !important;
  border-bottom: 4px solid #3c2718 !important;
  border-radius: 0px !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: none !important;
}
.auth-panel button:hover, .chars-panel button:hover {
  background: #8e6844 !important;
  color: #ffffff !important;
}
.auth-panel button:active, .chars-panel button:active {
  transform: translateY(2px) !important;
  border-bottom-width: 2px !important;
}
.auth-panel button.secondary, .chars-panel button.secondary {
  background: #3c2f25 !important;
  border-color: #5c4839 !important;
  border-bottom-color: #201812 !important;
}
.auth-panel button.secondary:hover, .chars-panel button.secondary:hover {
  background: #5c4839 !important;
}

.row { display: flex; gap: 8px; }
.row button { flex: 1; }
.err { color: #ff7a6a; font-size: 13px; min-height: 16px; }

#char-list { display: flex; flex-direction: column; gap: 8px; }
.char-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #110b07 !important; border: 2px solid #5c4839 !important; border-radius: 0px !important; padding: 10px 14px; cursor: pointer;
}
.char-row:hover { border-color: #f0c040 !important; }
#class-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.class-card {
  background: #110b07 !important; border: 2px solid #5c4839 !important; border-radius: 0px !important;
  padding: 10px; cursor: pointer; font-size: 12px;
}
.class-card.selected { border-color: #f0c040 !important; background: #201610 !important; }
.class-card b { display: block; font-size: 13px; margin-bottom: 4px; }
.class-card span { color: #a89880; }
#char-create { border-top: 1px solid #5c4839; padding-top: 12px; }
#char-create h3 { margin-bottom: 8px; font-family: 'MedievalSharp', 'Cinzel', serif; color: #f0c040; }

#canvas { position: absolute; inset: 0; display: block; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud-top { position: absolute; top: 12px; left: 12px; width: 250px; display: flex; flex-direction: column; gap: 6px; }
#char-hud {
  background: linear-gradient(#241710, #170e08);
  border: 1px solid #6a481f;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(230,196,126,.14);
  outline: 1px dashed rgba(184,130,60,.35); outline-offset: -5px; /* cusătură */
  padding: 9px 11px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#hud-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
#hud-name .char-nm {
  font-family: 'MedievalSharp', 'Cinzel', serif;
  font-weight: 700;
  font-size: 14px;
  color: #ffcf5a;
  text-shadow: 0 1px 3px #000;
  letter-spacing: 0.5px;
}
#hud-name .char-lvl {
  background: #3c2718;
  border: 1px solid #8e6844;
  color: #fcefd2;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  font-family: 'MedievalSharp', 'Cinzel', serif;
  text-transform: uppercase;
}
.bar {
  position: relative;
  height: 16px;
  background: #0b0703;
  border: 1.5px solid #5a3f1c;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.85), 0 1px 0 rgba(230,196,126,.1);
  display: flex;
  align-items: center;
}
/* luciu metalic sus, pe toată bara */
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 50%; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.16), transparent); border-radius: 9px 9px 0 0;
}
.bar .fill {
  height: 100%;
  width: 50%;
  border-radius: 8px;
  transition: width .15s;
}
.bar.hp .fill { background: linear-gradient(#ff6a52, #c62828 55%, #7e1e14); }
.bar.hp::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.85) 1.5px, transparent 1.5px),
    linear-gradient(to right, rgba(0,0,0,0.45) 1px, transparent 1px);
  background-size:
    var(--segw, 25%) 100%,
    calc(var(--segw, 25%) / 4) 100%;
  background-repeat: repeat-x, repeat-x;
}
.bar.mp .fill { background: linear-gradient(#68b6ff, #1565c0 55%, #173d67); }
.bar.xp { height: 11px; }
.bar.xp .fill { background: linear-gradient(#ffd873, #b5891b 55%, #8a5f14); }
.bar .bar-lbl {
  position: absolute;
  left: 6px;
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 2px #000;
  font-family: 'MedievalSharp', 'Cinzel', serif;
  z-index: 2;
}
.bar.xp .bar-lbl {
  font-size: 8px;
}
.bar span:not(.bar-lbl) {
  position: absolute;
  right: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
  font-family: 'MedievalSharp', 'Cinzel', serif;
  z-index: 2;
}
.bar.xp span:not(.bar-lbl) {
  font-size: 9px;
}
#hud-zone { font-size: 15px; font-weight: 700; color: #ffe6b8; text-shadow: 0 1px 2px #000; align-self: flex-start; background: rgba(20,14,8,.6); border: 1px solid rgba(139,106,62,.5); border-radius: 6px; padding: 3px 9px; }
/* B. banner cu modificatorul zilei — vizibil cat esti intr-un dungeon, sub numele zonei */
#hud-dmod { font-size: 12.5px; font-weight: 700; color: #ffd76a; text-shadow: 0 1px 2px #000; align-self: flex-start; background: linear-gradient(90deg, rgba(51,36,15,.85), rgba(36,26,16,.85)); border: 1px solid #6b5232; border-radius: 6px; padding: 3px 9px; margin-top: 3px; letter-spacing: .3px; }
.mobile #hud-dmod { font-size: 14px; padding: 4px 11px; }

/* clasamentul evenimentului PvP (/pvp on) */
/* In FLOW (nu absolut) — apare ca un card sub #hud-zone, ca sa nu se mai suprapuna peste numele zonei
   cand HUD-ul creste in inaltime (XP, debuff-uri, etc.). align-self ca sa nu se intinda pe toata latimea. */
#pvp-board {
  align-self: flex-start; width: 170px; margin-top: 6px; pointer-events: none;
  background: rgba(20,14,8,.82); border: 1px solid #6b5232; border-radius: 6px; padding: 4px 0;
  font-size: 12px; color: #f0e1cf; box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
#pvp-board .pvp-head { text-align: center; color: #ffd24a; font-weight: 700; font-family: 'MedievalSharp', 'Cinzel', serif; padding: 2px 8px 4px; border-bottom: 1px solid #3c2a1e; margin-bottom: 3px; }
#pvp-board .pvp-row { display: flex; align-items: center; gap: 6px; padding: 2px 8px; }
#pvp-board .pvp-row.top .pvp-name { color: #ffe9a0; }
#pvp-board .pvp-rank { width: 13px; color: #9a8568; text-align: right; }
#pvp-board .pvp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pvp-board .pvp-wl { color: #8fd0ff; font-weight: 700; }
#pvp-board .pvp-row.muted { color: #8a8f9a; justify-content: center; }
#pvp-board.pvp-collapsed { display: none; } /* ascuns prin butonul flotant */

/* Buton flotant special PvP — mereu vizibil cat dureaza event-ul, inclusiv pe mobil (in afara topbar-ului ☰) */
/* Buton PvP = ultim element al barei de meniu (langa ☰ pe mobil / dupa #menu-bar pe desktop). Inline in flex. */
#pvp-event-btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: #4a1414;
  border: 1.5px solid #c0563a; border-radius: 12px; cursor: pointer;
  color: #ffd9c0; font-family: 'MedievalSharp', 'Cinzel', serif; font-weight: 700; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 12px rgba(255,90,60,.35);
  animation: pvpBtnPulse 1.8s ease-in-out infinite; flex: 0 0 auto;
}
#pvp-event-btn .pvp-btn-lbl { font-size: 9px; letter-spacing: .5px; }
#pvp-event-btn.active { border-color: #ffd24a; color: #ffe9a0; }
#pvp-event-btn.pvp-final { background: #5a2b0c; border-color: #ffb02e; }
@keyframes pvpBtnPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 10px rgba(255,90,60,.3); }
  50%      { box-shadow: 0 2px 8px rgba(0,0,0,.5), 0 0 18px rgba(255,90,60,.65); }
}
/* in bara mobila (☰): potrivit pe 40px, ca celelalte butoane */
#mob-topbar #pvp-event-btn { width: 40px; height: 40px; font-size: 17px; }
/* in bara desktop (#menu-bar): aliniat vertical cu butoanele de meniu */
#menu-bar #pvp-event-btn { padding: 4px 12px; font-size: 18px; align-self: stretch; }
#menu-bar #pvp-event-btn .pvp-btn-lbl { font-size: 11px; }

/* ===== Casuta postala (mail) ===== */
.menu-btn { position: relative; }
.mail-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 1px 3px #000; }
.mail-badge.hidden { display: none; }
/* REDESIGN: registru cu doua panouri (lista stanga / pergament dreapta; stivuite pe mobil) */
/* Social: tab-uri exterioare Mail | Prieteni deasupra continutului */
.social-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.social-tab { flex: 1; text-align: center; padding: 7px 0; cursor: pointer; font-variant: small-caps; letter-spacing: .5px; font-size: 13px;
  background: linear-gradient(180deg, #33240f, #281a0c); border: 1px solid #1a120b; border-radius: 3px; color: #d8c9a8; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.social-tab:hover { color: #e8dcc4; }
.social-tab.on { background: linear-gradient(180deg, #4e3824, #3a2818); color: #f4d79a; border-color: #8a6a3e; box-shadow: inset 1px 1px 0 #7a5c3d; }
.social-tab .mt-badge { background: #c0392b; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; margin-left: 3px; }
.social-win.friends-win { width: min(420px, 94vw); }
.win.mail-win { width: min(840px, 96vw); max-width: min(840px, 96vw); } /* .win.mail-win: specificitate > .win (care are max-width 440px si e definit MAI JOS in fisier) */
.mail-win .win-body { position: relative; } /* ancora pt pana plutitoare */
/* pe ecrane inguste: registrul se stivuieste (lista sus, citire jos) ca sa nu iasa din rama */
@media (max-width: 540px) {
  .mail-panes { flex-direction: column; }
  .mail-list { width: 100% !important; flex: 0 0 auto !important; border-right: none; border-bottom: 1px solid rgba(201,163,92,.25); max-height: 150px; }
  .mail-read { margin: 8px 6px !important; }
}
.mail-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.mail-tab { flex: 1; text-align: center; padding: 5px 0; cursor: pointer; background: #1f1710; border: 1px solid #4a3826; border-radius: 4px; color: #9a8568; font-weight: 700; font-size: 13px; }
.mail-tab:hover { border-color: #7a5c3a; }
.mail-tab.active { background: #332619; color: #e6c84a; border-color: #8a6a3e; }
.mt-badge { background: #c0392b; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; }
.mail-panes { display: flex; gap: 0; min-height: 300px; max-height: 52vh; border: 1px solid #3c2a1e; border-radius: 2px; background: rgba(0,0,0,.18); }
.mail-list { width: 240px; flex: 0 0 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; border-right: 1px solid rgba(201,163,92,.25); padding: 3px 0; }
.mail-empty { text-align: center; padding: 16px; }
.empty-orn { font-size: 40px; opacity: .35; margin-bottom: 4px; }
.mail-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; cursor: pointer; background: transparent; border: none; border-left: 3px solid transparent; }
.mail-row:nth-child(even) { background: rgba(255,255,255,.03); }
.mail-row:hover { background: rgba(255,255,255,.06); }
.mail-row.sel { border-left-color: #c8a04a; background: #241b12; }
.mail-row.unread .mr-sub { color: #ffe9a0; font-weight: 700; }
.mail-row:not(.unread) .mr-sub { opacity: .6; } /* citite = estompate (ierarhia din mockup) */
/* sigiliu de ceara: rosu plin = necitit; plin inchis = citit (aceeasi marime -> aliniere stabila) */
.mail-seal { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: #a02818; box-shadow: inset 0 -2px 3px rgba(0,0,0,.5), 0 0 4px rgba(200,60,40,.5); }
.mail-seal.read { background: #3a2c1c; box-shadow: none; }
.mr-cols { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mr-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mr-from { color: #8a8f9a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-read { flex: 1; min-width: 0; margin: 8px; padding: 10px 12px; }
.mr-head { margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.mr-meta { font-size: 11px; }
.mr-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.5; color: #d8c9b0; max-height: 42vh; overflow-y: auto; }
/* pana plutitoare: compune scrisoare */
.mail-quill { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #c9a35c; background: linear-gradient(180deg, #7a2f22, #5a1f16); font-size: 21px; cursor: pointer; z-index: 8; box-shadow: 0 3px 8px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15); }
.mail-quill:hover { filter: brightness(1.2); transform: translateY(-1px); }
/* mobil: panourile se stivuiesc — lista sus (scrollabila), pergamentul jos */
.mobile .mail-panes { flex-direction: column; }
.mobile .mail-list { width: 100%; flex: 0 0 auto; border-right: none; border-bottom: 1px solid rgba(201,163,92,.25); max-height: 175px; }
/* mobil: win-body e scroller -> absolute ar DERULA cu continutul si ar acoperi "Revendica tot".
   sticky il tine ancorat vizual jos-dreapta in scroller, in flux (nu acopera nimic la finalul derularii). */
.mobile .mail-quill { position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); margin-left: auto; margin-right: 4px; margin-top: 8px; display: flex; align-items: center; justify-content: center; }
.mail-attach { margin-top: 8px; display: flex; align-items: center; gap: 8px; background: #20180e; border: 1px solid #6b5232; border-radius: 6px; padding: 6px 8px; }
.ma-txt { flex: 1; color: #ffd24a; font-size: 13px; }
.mail-del { margin-top: 8px; }
.mailc-win { width: 320px; }
.mailc-win .mc-l { display: block; margin: 6px 0 2px; font-size: 12px; color: #bca080; }
.mailc-win input, .mailc-win textarea { width: 100%; box-sizing: border-box; }
.mailc-win .rpg-btn { width: 100%; margin-top: 8px; }

/* ---- Lista de prieteni (👥) ---- */
.friends-win { width: 340px; }
.fr-add { display: flex; gap: 6px; margin-bottom: 8px; }
.fr-add .fr-name { flex: 1; box-sizing: border-box; background: #120d07; border: 1px solid #4a3826; border-radius: 4px; color: #e8dcc4; padding: 5px 8px; font-size: 13px; }
.fr-add .fr-name:focus { outline: none; border-color: #c8a04a; }
.fr-section { margin-top: 8px; }
.fr-head { font-size: 12px; font-weight: 800; color: #e6c84a; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; border-bottom: 1px solid #3c2a1e; padding-bottom: 3px; }
.fr-row { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 4px; background: #1a130c; border: 1px solid #2a1f12; margin-bottom: 2px; }
.fr-row:hover { border-color: #6b5232; }
.fr-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: #555; box-shadow: 0 0 0 1px #000; }
.fr-row.on .fr-dot { background: #4ad24a; box-shadow: 0 0 5px #4ad24a; }
.fr-nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #e8dcc4; }
.fr-row.off .fr-nm { color: #8a8578; }
.fr-info { font-size: 11px; flex-shrink: 0; }
.rpg-btn.sm { padding: 2px 7px; font-size: 12px; min-width: 0; }
.rpg-btn.danger { background: #7a2420; border-color: #8a3a2a; color: #ffcabb; }

#dung-banner {
  align-self: flex-start; margin-top: 4px; padding: 3px 11px; border-radius: 10px;
  background: #4a2d75; border: 1px solid #b08adf;
  color: #ece0ff; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: none;
  box-shadow: 0 0 8px rgba(176,138,223,.4);
}
#dung-banner.urgent { background: #82241d; border-color: #e0805a; animation: dungpulse 0.6s ease-in-out infinite; }
@keyframes dungpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
#dung-banner .db-count { font-size: 11px; font-weight: 700; margin-top: 2px; color: #ffe6a0; }
#dung-banner .db-count .muted { color: #c9b8e8; font-weight: 600; }
#dung-banner .db-bar { margin-top: 3px; height: 6px; border-radius: 4px; background: #1c1230; border: 1px solid #000; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.7); }
#dung-banner .db-fill { height: 100%; border-radius: 4px; background: linear-gradient(#ff6a52, #c8392b 60%, #7e1e14); transition: width .25s; }
/* 🔦 badge torță (timer în hărțile întunecate) */
#torch-badge {
  align-self: flex-start; margin-top: 4px; padding: 2px 10px; border-radius: 10px;
  background: linear-gradient(#5a3d16, #3c2810); border: 1px solid #e6a030;
  color: #ffe0a0; font-size: 13px; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: auto;
  box-shadow: 0 0 10px rgba(255,150,40,.4); font-variant-numeric: tabular-nums;
}
#torch-badge.low { background: #6a2410; border-color: #ff6a3c; color: #fff; animation: torchLow 0.5s ease-in-out infinite; }
@keyframes torchLow { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
#xp-boost-badge {
  align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 10px;
  background: #6f4a16; border: 1px solid #f0c040;
  color: #ffe9a8; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: auto;
  box-shadow: 0 0 8px rgba(240,192,64,.4);
}
#food-badge {
  align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 10px;
  background: #44691e; border: 1px solid #8fdf5a;
  color: #e6ffc8; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: auto;
  box-shadow: 0 0 8px rgba(120,224,90,.4);
}
/* Colectii: bara de progres */
.coll-bar { height: 7px; background: #1c140e; border: 1px solid #4a3d2a; border-radius: 4px; overflow: hidden; }
.coll-fill { height: 100%; background: #d8a93a; transition: width .3s; }
#temper-badge {
  align-self: flex-start; margin-top: 4px; padding: 2px 9px; border-radius: 10px;
  background: #4a586c; border: 1px solid #b8c4d8;
  color: #e8f0ff; font-size: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; pointer-events: auto;
  box-shadow: 0 0 8px rgba(184,196,216,.4);
}
#hud-target { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 260px; }
#target-name { text-align: center; font-size: 13px; text-shadow: 0 1px 3px #000; margin-bottom: 3px; }
#target-clear {
  position: absolute; top: -2px; right: -8px; width: 22px; height: 22px; z-index: 2;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: #7a1d18; border: 1px solid #e0805a; border-radius: 50%; color: #fff; font-size: 13px;
  pointer-events: auto; /* #hud are pointer-events:none -> butonul trebuie sa-l reactiveze ca sa prinda tap */
}
#target-clear:hover, #target-clear:active { background: #9a2a22; }
.mobile #target-clear { width: 30px; height: 30px; right: -12px; font-size: 16px; touch-action: manipulation; }

/* Iconite custom de UI (in loc de emoji). Aliniere pe linia de baza a textului + randare crispa (pixel-art). */
.gi { display: inline-block; vertical-align: -0.18em; image-rendering: pixelated; -webkit-user-select: none; user-select: none; }
#hud-yang { position: absolute; top: 12px; right: 12px; color: #cdd6e2; font-weight: 700; text-shadow: 0 1px 3px #000; }
#hud-dc { position: absolute; top: 32px; right: 12px; color: #5ad1ff; font-weight: 700; text-shadow: 0 0 8px rgba(90,209,255,.45), 0 1px 3px #000; }
/* Indicator de ping (sub minimap, dreapta-sus): bare de semnal + numar */
#hud-ping {
  position: absolute; top: 216px; right: 12px; width: 156px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 11px; font-weight: 700; color: #cfd6e0; text-shadow: 0 1px 2px #000; pointer-events: auto;
}
#hud-online { color: #8fd6a0; white-space: nowrap; }              /* jucatori online langa MS */
#hud-shops { color: #d8b878; white-space: nowrap; }               /* tarabe active langa online */
#hud-ping .b { fill: #3a3f4a; transition: fill .25s; }            /* bara stinsa */
#hud-ping.good .b { fill: #5ad07a; }                              /* <50ms: toate 4 verzi */
#hud-ping.mid .b1, #hud-ping.mid .b2, #hud-ping.mid .b3 { fill: #e6c84a; } /* 50-150ms: 3 galbene */
#hud-ping.bad .b1 { fill: #e05050; }                              /* >=150ms: 1 rosie */
/* Panou info portal (deasupra portalului, la proximitate sau hover) */
#portal-info {
  position: absolute; z-index: 45; transform: translate(-50%, -100%);
  pointer-events: none; min-width: 192px; max-width: 310px; padding: 8px 10px;
  background: #251c15; border: 2px solid #6b5232; border-radius: 6px;
  box-shadow: 4px 4px 0 #120e0a, 0 8px 24px rgba(0,0,0,.7);
  font-size: 12px; color: #e2d9cc;
}
#portal-info::after { content: ""; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%); border: 7px solid transparent; border-top-color: #6b5232; }
#portal-info .pi-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-weight: 700; color: #d0a0ff;
  font-size: 13px; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
#portal-info .pi-tag { font-size: 10px; font-weight: 700; background: #2e7d32; color: #fff;
  border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: .5px; }
#portal-info .pi-row { display: flex; align-items: center; gap: 5px; margin: 2px 0; }
#portal-info .pi-row .lbl { color: #8a8f9a; flex: 0 0 auto; white-space: nowrap; }
/* rand "Inamici": eticheta sus, textul (poate fi lung, cu "otrava") curge sub ea fara sa se suprapuna */
#portal-info .pi-enemies { flex-direction: column; align-items: flex-start; gap: 1px; }
#portal-info .pi-enemy-txt { color: #e2d9cc; line-height: 1.25; word-break: break-word; }
#portal-info .pi-drops img { width: 20px; height: 20px; vertical-align: middle; margin-right: 2px; }
#portal-info b { color: #f0c040; }
/* 🕳👥 pornirea in grupa a Abisului — vizibila doar liderului */
#portal-info .pi-party { border-color: #6d8fd0; color: #cfe0ff;
  background: linear-gradient(#2a3550, #1e2740); background-image: none; }
#portal-info .pi-enter { pointer-events: auto; display: block; width: 100%; margin-top: 8px; padding: 8px 10px;
  font-family: 'MedievalSharp', 'Cinzel', serif; font-weight: 700; font-size: 13px; cursor: pointer; }
/* B. modificator zilnic pt dungeon: banda auritа sus */
#portal-info .pi-mod { background: linear-gradient(90deg, #33240f, #241a10); border: 1px solid #6b5232; border-radius: 4px; padding: 3px 6px; margin: 3px 0; }
#portal-info .pi-mod .pi-mod-name { color: #ffd76a; font-weight: 700; letter-spacing: .3px; }
#portal-info .pi-cd { color: #ffb64a; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A. cerere de intrare: chip-uri cu iteme + Silver */
#portal-info .pi-cost { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; background: rgba(0,0,0,.3); border: 1px solid #4a3625; border-radius: 3px; color: #e8dcc4; font-size: 11px; margin-right: 3px; }
/* G. Vânatul Săptămânii: banner featured pe portal */
#portal-info .pi-feat { background: linear-gradient(90deg, #4a3410, #2a1c0a); border: 1px solid #c99a3a; border-radius: 4px; padding: 3px 6px; margin: 3px 0; }
#portal-info .pi-feat b { color: #ffd76a; }
/* D. reputatia ta la dungeon */
#portal-info .pi-rep b { color: #ffd76a; font-variant-numeric: tabular-nums; }
#portal-info .pi-rep-bar { height: 6px; background: #0d0906; border: 1px solid #2a1f12; border-radius: 3px; overflow: hidden; margin: 2px 0 1px; }
#portal-info .pi-rep-fill { height: 100%; background: linear-gradient(90deg, #6bc86b, #3fbf3f); }

/* D. Reputație Hrube — tab Caracter */
.rep-head { color: #ffd76a; font-size: 13px; font-weight: 700; margin: 4px 0 6px; }
.rep-row { margin-bottom: 9px; }
.rep-row .rep-top { display: flex; justify-content: space-between; align-items: baseline; }
.rep-row .rep-nm { font-size: 12.5px; color: #e8dcc4; }
.rep-row .rep-val { color: #ffd76a; font-variant-numeric: tabular-nums; }
.rep-row .rep-bar { height: 8px; background: #0d0906; border: 1px solid #2a1f12; border-radius: 3px; overflow: hidden; margin: 3px 0; }
.rep-row .rep-fill { height: 100%; background: linear-gradient(90deg, #6bc86b, #3fbf3f); transition: width .3s ease; }
.rep-row .rep-perks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.rep-row .rep-perk { font-size: 9.5px; padding: 1px 5px; border-radius: 3px; background: rgba(0,0,0,.3); border: 1px solid #2a1f12; color: #6a5c4a; }
.rep-row .rep-perk.on { color: #3fbf3f; border-color: rgba(63,191,63,.35); background: rgba(63,191,63,.08); }
.rep-note { font-size: 10.5px; margin-top: 4px; line-height: 1.4; }

/* Teleport (Călăuză) — carduri de destinatie */
.tp-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; margin-bottom: 5px;
  background: linear-gradient(180deg, #241a10, #1a130c); border: 1px solid #2a1f12; border-left: 3px solid #6b5232;
  border-radius: 6px;
}
.tp-row.tp-map { cursor: pointer; }
.tp-row.tp-map:hover { background: #33240f; border-left-color: #f0c040; }
.tp-row .tp-ic { font-size: 20px; flex: 0 0 auto; }
.tp-row .tp-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tp-row .tp-mid b { color: #e8dcc4; font-size: 13px; }
.tp-row .tp-sub { font-size: 10.5px; }
.tp-row .tp-cost { color: #e6c84a; }
.mobile .tp-row { padding: 9px 10px; }
.mobile .tp-row .rpg-btn { min-height: 40px; }
/* 📖 Ghid de progres (la Călăuză) */
.prog-guide { margin-bottom: 10px; border: 1px solid #6b5232; border-radius: 6px; background: #1e160e; overflow: hidden; }
/* Ghidul de progres: summary-ul e butonul principal al Călăuzei — arata ca un buton, nu ca un rand de text */
.prog-guide > summary { cursor: pointer; padding: 9px 11px; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, #3d2c17, #2a1c0d); box-shadow: inset 1px 1px 0 rgba(160,120,70,.4); }
.prog-guide > summary::-webkit-details-marker { display: none; }
.prog-guide > summary:hover { background: linear-gradient(180deg, #50391d, #35240f); }
.pg-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 2px #000); }
.pg-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.pg-txt b { font: 700 13.5px 'Cinzel', serif; color: #f0c860; letter-spacing: .4px; }
.pg-txt small { font-size: 10.5px; color: #b09468; }
.pg-chev { color: #b09468; font-size: 11px; flex: 0 0 auto; transition: transform .15s ease; }
.prog-guide[open] > summary .pg-chev { transform: rotate(90deg); }
.prog-guide.pulse { animation: pg-pulse 1.6s ease-in-out infinite; }
@keyframes pg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240,200,96,.55); border-color: #6b5232; }
  50%      { box-shadow: 0 0 0 6px rgba(240,200,96,0); border-color: #f0c860; }
}
@media (prefers-reduced-motion: reduce) { .prog-guide.pulse { animation: none; border-color: #f0c860; } }
.prog-body { padding: 6px 8px 8px; display: flex; flex-direction: column; gap: 8px; }
.prog-tier { border-left: 3px solid #4a3a24; padding: 4px 8px; border-radius: 4px; background: rgba(0,0,0,.2); }
.prog-tier.prog-on { border-left-color: #f0c040; background: rgba(240,192,64,.08); }
.prog-th { display: flex; align-items: center; gap: 8px; }
.prog-th b { color: #e8dcc4; font-size: 12.5px; }
.prog-th .muted { font-size: 10.5px; }
.prog-you { margin-left: auto; font: 800 9.5px 'Segoe UI', sans-serif; color: #1a1206; background: #f0c040; padding: 1px 6px; border-radius: 4px; letter-spacing: .5px; }
.prog-tip { color: #b7a892; font-size: 11px; margin: 3px 0 5px; font-style: italic; }
.prog-zone { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #d8cdb6; padding: 1px 0; }
.prog-zone.prog-dg .prog-zn { color: #d0a0ff; }
.prog-zone .prog-lv { color: #8a8f9a; flex: 0 0 auto; }

/* Pet picker — celule tip card */
.pet-cell { background: linear-gradient(180deg, #241a10, #1a130c) !important; border: 1px solid #3c2a1e !important; border-radius: 7px !important; box-shadow: none !important; }
.pet-cell:hover { border-color: #8c6a3e !important; background: #2a1e12 !important; }
.pet-cell-sel { border-color: #f0c040 !important; background: #33240f !important; box-shadow: 0 0 10px rgba(240,192,64,.25) !important; }
.pet-cell span { color: #e8dcc4; }

/* Spotlight tutorial: intuneca ecranul cu o "gaura" pulsanta peste tinta (box-shadow gigant) */
#tut-spot { position: fixed; inset: 0; z-index: 8000; pointer-events: none; }
#tut-spot .ts-hole {
  position: fixed; border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
  outline: 3px solid #ffd94a;
  animation: tsPulse 1.1s ease-in-out infinite;
}
@keyframes tsPulse { 0%,100% { outline-color: #ffd94a; outline-offset: 0; } 50% { outline-color: #fff3c0; outline-offset: 5px; } }
#tut-spot .ts-text {
  position: fixed; width: 280px; text-align: center;
  color: #ffd94a; font-size: 15px; font-weight: 700; letter-spacing: .3px;
  text-shadow: 0 2px 4px #000, 0 0 14px rgba(0,0,0,.9);
  font-family: "MedievalSharp", "Cinzel", serif;
}
.gm-min-fab {
  position: fixed; z-index: 200; width: 48px; height: 48px; border-radius: 50%;
  background: #2a1d12; border: 2px solid #c9a35c; color: #ffd985; font-size: 22px;
  cursor: grab; touch-action: none; box-shadow: 0 3px 12px rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center; user-select: none;
}
.gm-min-fab:hover { background: #3a2817; border-color: #ffd985; }
.gm-min-fab:active { cursor: grabbing; }
#tut-spot .ts-skip {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%); pointer-events: auto; z-index: 8100;
  background: rgba(20,14,8,.95); color: #ffd94a; cursor: pointer;
  border: 2px solid #c9a35c; border-radius: 8px; padding: 11px 22px;
  font-family: "MedievalSharp", "Cinzel", serif; font-size: 15px; font-weight: 700; letter-spacing: .4px;
  box-shadow: 0 3px 12px rgba(0,0,0,.7);
}
#tut-spot .ts-skip:hover { background: rgba(45,30,16,.96); border-color: #c9a35c; color: #fff2c9; }
/* tinta evidentiata e jos (hotbar/banda de moduri) -> butonul sare sus, ca sa nu stea peste ea */
#tut-spot .ts-skip.ts-skip-top { bottom: auto; top: 16px; }
/* Detalii "Terminate" din jurnal — pliabil, inchis implicit */
.quest-done-fold summary {
  cursor: pointer; font-size: 12px; letter-spacing: .5px; color: #8a7a63; text-transform: uppercase;
  padding: 6px 2px 4px; border-top: 1px solid #3c2a1e; margin-top: 6px; user-select: none;
}
.quest-done-fold summary:hover { color: #ffd76a; }
.quest-done-fold[open] summary { margin-bottom: 6px; }
.quest-done-fold .qcard { margin-bottom: 6px; }

/* F. Colecționar */
.collector-urgent { padding: 7px 9px; margin-bottom: 8px; border-radius: 6px; background: linear-gradient(90deg, #4a2410, #2a1408); border: 1px solid #c8642a; color: #ffcf9a; font-size: 12px; }
.collector-urgent b { color: #ffd76a; }
.collector-penalty { padding: 7px 9px; margin-bottom: 8px; border-radius: 6px; background: linear-gradient(90deg, #3a1010, #240808); border: 1px solid #b03030; color: #ffb0b0; font-size: 12px; }
.collector-penalty b { color: #ff8a6a; }
.collector-list { display: flex; flex-direction: column; gap: 5px; }
.collector-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 6px 8px; background: #1a130c; border: 1px solid #2a1f12; border-radius: 6px; }
.collector-row.urgent { border-color: #c8642a; box-shadow: inset 0 0 0 1px rgba(200,100,42,.15); }
/* ai 0 din item: intuneca DOAR iconita/info + butoanele de VANZARE (disabled oricum); butoanele de CUMPARA raman clare (poti cumpara oricand) */
.collector-row.dim .cl-ic, .collector-row.dim .cl-mid, .collector-row.dim .cl-act .btn-accept { opacity: .45; }
.collector-row .cl-ic { width: 30px; height: 30px; image-rendering: pixelated; }
.collector-row .cl-nm { font-size: 12.5px; color: #e8dcc4; }
.collector-row .cl-urg { color: #ffb54a; font-weight: 700; font-size: 10px; }
.collector-row .cl-pr { font-size: 10.5px; }
.collector-row .cl-act { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } /* 3 vânzare + 3 cumpărare = 2 rânduri */
.collector-row .cl-act .rpg-btn { padding: 4px 6px; font-size: 10.5px; white-space: nowrap; }
.collector-row .cl-act .rpg-btn.xs { padding: 4px 5px; font-size: 10px; }
.collector-row.deal { border-color: #3fbf3f; box-shadow: inset 0 0 0 1px rgba(63,191,63,.14); }
.collector-row .cl-deal { color: #6bdc6b; font-weight: 700; font-size: 10px; }
.collector-row .cl-buyp { color: #e8dcc4; }
.collector-row .cl-buyp.deal { color: #6bdc6b; }
.collector-row .cl-buy-btn { background: linear-gradient(180deg, #a26a1a, #7a4d0a); color: #fff; border: 1px solid #4a2a08; }
/* 📈 Semafor stoc Radu — chip inline langa numele itemului */
.cl-stock { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-left: 4px; letter-spacing: .3px; }
.cl-stock.rare { color: #ffd24a; background: rgba(255,210,74,.14); border: 1px solid rgba(255,210,74,.5); }
.cl-stock.mid  { color: #c8b58a; background: rgba(201,181,138,.10); border: 1px solid rgba(201,181,138,.35); }
.cl-stock.sat  { color: #b47070; background: rgba(180,112,112,.14); border: 1px solid rgba(180,112,112,.5); }
.mobile .collector-row .cl-act .rpg-btn { min-height: 38px; }

/* Barbut Haos: zarurile se INVART CONTINUU cat un jucator a apasat "Aruncă" (JS scoate clasa la reveal) */
.bb-dice.spin .bb-die { animation: bbSpin .32s linear infinite; }
@keyframes bbSpin {
  0%   { transform: rotate(0deg)   scale(1); }
  25%  { transform: rotate(90deg)  scale(1.15); }
  50%  { transform: rotate(180deg) scale(0.95); }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
/* chip cu zarul special echipat (al tau = auriu; al adversarului = avertisment rosiatic) */
.bb-mod {
  display: inline-block; margin: 2px 4px 6px 0; padding: 3px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
  background: linear-gradient(90deg, #33240f, #241a10); border: 1px solid #c99a3a; color: #ffd76a;
}
.bb-mod.opp { border-color: #c0504a; color: #e0a2a2; }

/* E. Speedrun leaderboard */
.sr-wrap { display: flex; flex-direction: column; gap: 12px; } /* scroll = doar .win-body (altfel dublu scrollbar) */
.sr-dungeon { background: #1a130c; border: 1px solid #2a1f12; border-radius: 6px; padding: 8px 9px; }
.sr-dungeon .sr-h { color: #ffd76a; font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.sr-dungeon .sr-sub { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: #8a7a63; margin: 6px 0 3px; }
.sr-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; font-size: 12px; }
.sr-row .sr-pos { text-align: center; color: #8a7a63; }
.sr-row .sr-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .sr-ms { color: #ffd76a; font-weight: 700; font-variant-numeric: tabular-nums; }
.sr-empty { font-size: 11px; padding: 2px 4px; }

/* 📢 Noutăți (patch notes) */
.news-overlay { position: fixed; inset: 0; z-index: 9300; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 16px; }
.news-box { max-width: 500px; width: 100%; max-height: 84vh; overflow-y: auto; padding: 18px 20px; background: #251c15; border: 3px solid #6b5232; border-radius: 6px; box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0,0,0,.8); }
.news-box .news-title { text-align: center; color: #ffd76a; font-size: 22px; font-weight: 700; letter-spacing: .5px; text-shadow: 0 1px 2px #000; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #4a3826; }
.news-entry { margin-bottom: 12px; padding: 12px 14px; background: rgba(20, 12, 6, .55); border: 1px solid #4a3826; border-left: 3px solid #d4a24a; border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,208,120,.06), 0 2px 6px rgba(0,0,0,.35); }
.news-entry:last-of-type { margin-bottom: 8px; }
.news-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed #3c2a1e; }
.news-head .news-h { color: #ffd76a; font-size: 16px; font-weight: 700; text-shadow: 0 1px 1px #000; }
.news-head .news-date { color: #a89474; font-size: 11px; white-space: nowrap; font-style: italic; }
.news-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.news-list li { font-size: 13px; color: #ede0c4; line-height: 1.5; }
.news-list li b { color: #ffe08a; }
.news-box .news-ok { display: block; margin: 10px auto 0; padding: 10px 28px; }
.mobile .news-box .news-ok { min-height: 44px; width: 100%; }

/* ===== Frame HUD „Os & Bronz" — vinietă + colțuri filigranate (non-interactiv, deasupra hărții) ===== */
#hud-frame { position: fixed; inset: 0; pointer-events: none; } /* fara z-index: primul copil din #hud -> desenat SUB restul HUD, peste canvas */
#hud-frame .hf-vig { position: absolute; inset: 0;
  background: radial-gradient(125% 95% at 50% 46%, transparent 56%, rgba(20,10,4,.22) 80%, rgba(8,4,1,.5) 100%);
  box-shadow: inset 0 0 70px rgba(0,0,0,.4); }
#hud-frame .hf-corner { position: absolute; width: 92px; height: 92px; color: #b8823c; filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)); opacity: .82; }
#hud-frame .hf-corner.tl { top: 8px; left: 8px; }
#hud-frame .hf-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
#hud-frame .hf-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
#hud-frame .hf-corner.br { bottom: 8px; right: 8px; transform: scale(-1,-1); }
.mobile #hud-frame { display: none; } /* pe mobil HUD-ul e complet diferit */

/* ===== Hotbar „Os & Bronz" — placă de lemn cu ferecături de bronz + nituri în colțuri ===== */
#hotbar { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; pointer-events: auto;
  padding: 10px 13px; border-radius: 12px; border: 1px solid #4a3114;
  background:
    radial-gradient(circle at 10px 10px, #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) 10px, #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at 10px calc(100% - 10px), #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    linear-gradient(#3a2717, #2a1c10 55%, #1d1309);
  box-shadow: 0 10px 26px rgba(0,0,0,.6), inset 0 1px 0 rgba(230,196,126,.16), inset 0 -3px 8px rgba(0,0,0,.5);
}
/* Bară de moduri (F1 Luptă / F2 Pescuit / F3 Minerit) — file de pergament pe capul plăcii */
.hb-modes { flex-basis: 100%; display: flex; justify-content: center; gap: 7px; margin-bottom: 6px; }
.hb-mode { position: relative; display: flex; align-items: center; gap: 5px; padding: 3px 11px 4px; cursor: pointer;
  color: #c3aa77; font-size: 11.5px; user-select: none; transition: .14s;
  background: linear-gradient(#33230f, #22160a); border: 1px solid #4a3114; border-radius: 7px 7px 3px 3px;
  box-shadow: inset 0 1px 0 rgba(230,196,126,.12); }
.hb-mode:hover { color: #e7d7ab; border-color: #b8823c; }
.hb-mode.active { color: #f0c040; background: linear-gradient(#5a3d16, #3c2810); border-color: #e6c47e;
  box-shadow: 0 -1px 9px rgba(240,192,64,.3), inset 0 1px 0 rgba(255,225,150,.25); }
.hb-mode .hbm-k { font-weight: 700; font-size: 9px; opacity: .7; }
.hb-mode .hbm-g { font-size: 14px; }
/* F4 Torță: actiune, nu mod — arata cate torte ai; palit cand nu mai ai */
.hb-mode .hbm-n { font-weight: 700; font-size: 10px; color: #f0c040; margin-left: 1px; }
.hb-mode.hb-torch.empty { opacity: .42; }
.hb-mode.hb-torch.active { color: #ffd77a; border-color: #ffb44a; box-shadow: 0 0 8px rgba(255,170,60,.55); }

.hot-slot {
  position: relative; width: 50px; height: 50px; border-radius: 8px; cursor: pointer; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #241813, #120b06);
  border: 2px solid #0f0904; display: flex; align-items: center; justify-content: center;
  font-size: 10px; text-align: center; transition: transform .1s;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.75), inset 0 -1px 0 rgba(230,196,126,.06);
}
.hot-slot:hover { transform: translateY(-2px); border-color: #3a2a18; }
/* plăcuță de OS pt tastă (colț dreapta-jos) */
.hot-slot .key { position: absolute; right: -2px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; z-index: 4;
  display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 9.5px; font-weight: 700; color: #2a1d0c;
  background: linear-gradient(#ece0c4, #b9a97f); border: 1px solid #000; border-radius: 4px; box-shadow: 0 1px 2px #000; }
/* 🎮 eticheta de CONTROLLER pe slot: albastru-consola + MAI MARE decat tasta de tastatura
   (glifele □ △ ↑ → sunt ilizibile la 9.5px, iar pe pad te uiti la ele des). */
.hot-slot .key.pad-key {
  background: linear-gradient(#e8f2ff, #7f9dc8); color: #0b1a30; border-color: #06101f;
  min-width: 21px; height: 19px; padding: 0 4px; right: -4px; bottom: -5px;
  font-family: system-ui, "Segoe UI Symbol", sans-serif; font-size: 13px; line-height: 1;
  box-shadow: 0 1px 3px #000, inset 0 1px 0 rgba(255,255,255,.55);
}
/* banda de moduri (L2+↑ …): la fel, lizibila si in albastru-consola */
.hb-mode .hbm-k.pad-key {
  font-size: 11px; padding: 1px 4px; letter-spacing: 0;
  background: linear-gradient(#e8f2ff, #7f9dc8); color: #0b1a30;
  border: 1px solid #06101f; border-radius: 3px;
}
/* bara de meniu: eticheta de controller (Share / Options) — lizibila peste iconita */
.menu-btn .mk.pad-key {
  background: linear-gradient(#e8f2ff, #7f9dc8); color: #0b1a30;
  border: 1px solid #06101f; border-radius: 3px; padding: 0 3px; font-size: 9px; text-shadow: none;
}
/* focus de controller (login, ferestre, HUD) */
.pad-focus {
  outline: 3px solid #ffd94a !important; outline-offset: 2px;
  box-shadow: 0 0 14px rgba(255, 217, 74, .55) !important;
}
/* cursorul 👉 sta in STANGA elementului focusat si aluneca spre el */
#pad-cursor {
  position: fixed; z-index: 9990; pointer-events: none; display: none;
  font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 3px #000);
  transition: left .08s ease-out, top .08s ease-out;
  animation: padCursorNudge 1s ease-in-out infinite;
}
@keyframes padCursorNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { #pad-cursor { animation: none; transition: none; } }

/* 🎯 reticul pt minijocurile pe canvas (cupe / clopotei / minerit) — cursorul mutat cu stickul */
#pad-reticle {
  position: fixed; z-index: 9991; pointer-events: none; display: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 2px solid #ffd94a; box-shadow: 0 0 8px rgba(255,217,74,.7), inset 0 0 6px rgba(255,217,74,.35);
}
/* liniuțele de cruce, ca sa vezi punctul exact chiar si peste desen aglomerat */
#pad-reticle::before, #pad-reticle::after {
  content: ""; position: absolute; background: #ffd94a; box-shadow: 0 0 4px #000;
}
#pad-reticle::before { left: 50%; top: -7px; width: 2px; height: 34px; margin-left: -1px; }
#pad-reticle::after { top: 50%; left: -7px; height: 2px; width: 34px; margin-top: -1px; }
#pad-reticle.down { border-color: #ff9a3c; transform: scale(.82); background: rgba(255,154,60,.18); }
/* 🖱 cursorul LIBER (L2+R3): sageata clasica, nu cruce de tintit — se poarta ca un mouse */
#pad-reticle.free {
  width: 0; height: 0; margin: 0; border: none; border-radius: 0; box-shadow: none;
  background: none;
}
#pad-reticle.free::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 0;
  border-left: 13px solid #ffd94a; border-bottom: 19px solid transparent;
  transform: rotate(-20deg); transform-origin: 0 0;
  filter: drop-shadow(1px 2px 2px rgba(0,0,0,.9));
}
#pad-reticle.free::after {
  content: ""; position: absolute; left: 1px; top: 2px; width: 0; height: 0;
  border-left: 9px solid #2a1d0c; border-bottom: 13px solid transparent;
  transform: rotate(-20deg); transform-origin: 0 0; margin: 0;
}
#pad-reticle.free.down::before { border-left-color: #ff9a3c; }
/* cooldown RADIAL (umbră conică care se scurge) + cifra deasupra */
.hot-slot .cd { position: absolute; inset: 0; border-radius: 6px; pointer-events: none; z-index: 3;
  background: conic-gradient(rgba(6,4,2,.78) var(--p, 0%), transparent 0); }
.hot-slot .cdn { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; pointer-events: none;
  font-family: Georgia, serif; font-weight: 700; font-size: 15px; color: #ffe6a0; text-shadow: 0 1px 3px #000; }
.hot-slot .cnt { position: absolute; bottom: 1px; left: 4px; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; z-index: 2; }
.hot-slot .slvl { position: absolute; top: 1px; right: 4px; color: #ffd76a; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; z-index: 2; }
.hot-ic { width: 42px; height: 42px; }
.hot-ic.locked, .skill-ic.locked { filter: grayscale(1) brightness(0.55); }
.hot-ability { background: #2a1f12; border-color: #8a6a3e; }
.hot-ability .ab-glyph { font-size: 26px; line-height: 1; color: #bfe0ff; text-shadow: 0 1px 3px #000; }
.bar-draggable { cursor: grab; }
.bar-draggable:active { cursor: grabbing; }

/* Meniul de joc (ESC) */
.menu-win { width: 268px; }
.menu-body { display: flex; flex-direction: column; gap: 5px; padding: 4px 2px; }
.menu-action {
  width: 100%; padding: 10px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  text-align: left; letter-spacing: .2px;
  background: linear-gradient(180deg, #241a10, #1a130c); color: #e8dcc4;
  border: 1px solid #2a1f12; border-left: 3px solid #6b5232; border-radius: 5px;
  font-family: inherit; transition: none;
}
.menu-action:hover { background: #33240f; color: #ffd76a; border-left-color: #f0c040; }
.menu-action:active { transform: translateY(1px); }
.menu-action.danger { border-left-color: #7a2a20; }
.menu-action.danger:hover { background: #3a1810; color: #e0a2a2; border-left-color: #c0504a; }
.skill-row { display: flex; gap: 10px; align-items: flex-start; }
.skill-ic { width: 40px; height: 40px; flex-shrink: 0; margin-top: 2px; }
.skill-info { flex: 1; }

#hud-help { position: absolute; bottom: 0; right: 8px; font-size: 10px; color: #6a6f7a; }

/* Bara de meniu (butoane ferestre) */
#menu-bar { position: absolute; bottom: 30px; right: 12px; display: flex; flex-direction: column; gap: 6px; pointer-events: auto; }
.menu-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 58px; height: 44px; padding: 0; background: #8c6239; border: 2px solid #3e281c;
  border-bottom: 4px solid #2a1b12; border-radius: 4px;
  color: #e2d9cc; font-family: inherit; font-size: 9px; cursor: pointer;
  text-shadow: 0 1px 1px #000; font-weight: 700; box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  transition: transform 0.05s, border-bottom-width 0.05s;
}
.menu-btn:hover { background: #a17246; color: #fff; }
.menu-btn.active { background: #3e2d1f; border-color: #8a6a3e; color: #f0c040; border-bottom-width: 2px; transform: translateY(2px); }
.menu-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.menu-btn .ic { font-size: 16px; line-height: 1; }
.menu-btn .lbl { letter-spacing: .3px; }
.menu-btn .mk { position: absolute; top: 1px; left: 4px; color: #f0c040; font-size: 10px; font-weight: 700; text-shadow: 0 1px 2px #000; }

#auto-ind {
  position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);
  color: #ff9a5a; font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 1px 3px #000; animation: pulse 1.2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Chat */
#chat { position: absolute; left: 12px; bottom: 14px; width: 440px; pointer-events: none; }
/* Hover / tap pe chat-zone -> readuce chat-ul la opacitate maxima (anuleaza auto-fade). */
#chat:hover #chat-lines, #chat.chat-active #chat-lines,
#chat:hover #chat-filters, #chat.chat-active #chat-filters { opacity: 1; }
#chat-filters { display: flex; gap: 4px; margin-bottom: 4px; pointer-events: auto; transition: opacity 0.6s ease; }
/* La hide: si randul de filtre (LUME/LOCAL/PERSONAL/INFO/SERVER) dispare de tot. */
#chat.chat-faded #chat-filters { opacity: 0; }
.chat-filter {
  pointer-events: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: #140f0a; color: #6a6f7a; border: 1px solid #4a3826; cursor: pointer; text-shadow: 0 1px 2px #000;
}
.chat-filter.on { color: var(--ch, #cfd6e0); border-color: var(--ch, #5a6070); background: #000c; }
#chat-lines { display: flex; flex-direction: column; gap: 1px; max-height: 210px; overflow-y: auto; overflow-x: hidden; font-size: calc(12px * var(--chat-scale, 1)); pointer-events: auto; scrollbar-width: thin; scrollbar-color: #5a6070 transparent; opacity: 1; transition: opacity 0.6s ease, max-height 0.2s ease; }
/* La Enter: chat expandat — panou mai înalt cu fundal opac, ca să vezi și să dai scroll în istoric */
#chat.chat-expanded { pointer-events: auto; }
#chat.chat-expanded #chat-lines { max-height: 55vh; background: rgba(10, 8, 6, 0.82); border: 1px solid #4a3826; border-radius: 6px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.5); opacity: 1 !important; font-size: calc(13px * var(--chat-scale, 1)); }
#chat.chat-expanded #chat-filters { opacity: 1 !important; }
/* Auto-fade: dupa 6s fara mesaj nou, chat-lines devine semi-transparent. Hover/tap il readuce. */
#chat.chat-faded #chat-lines { opacity: 0.18; }
#chat-lines::-webkit-scrollbar { width: 7px; }
#chat-lines::-webkit-scrollbar-thumb { background: #5a6070cc; border-radius: 4px; }
#chat-lines::-webkit-scrollbar-track { background: transparent; }
/* fundal mai opac + umbra dubla + linie de citit mai aerisita — textul info se citea greu pe iarba/apa */
#chat-lines div { text-shadow: 0 1px 2px #000, 0 0 3px rgba(0,0,0,.9); background: rgba(8,6,4,.74); padding: 2px 8px; border-radius: 4px; width: fit-content; max-width: 100%; line-height: 1.35; border: 1px solid rgba(0,0,0,.35); }
#chat-lines .sys { color: #ffd75e; font-weight: 600; }
.awaken-line { color: #ffd9a0 !important; }
.awaken-item-link { color: #ff9a5a; font-weight: 700; cursor: pointer; text-decoration: underline dotted; pointer-events: auto; }
.awaken-item-link:hover { color: #ffd24a; }
#chat-lines .chat-line.filtered { display: none; }
.ch-tag { font-size: 10px; font-weight: 700; opacity: 0.85; }
#chat-input { pointer-events: auto; margin-top: 4px; }

/* Ferestre */
#windows { position: absolute; inset: 0; pointer-events: none; }
.win {
  position: absolute;
  z-index: 100; /* mereu peste panoul de portal (#portal-info z-index 5) si lumea */
  background: #251c15;
  border: 3px solid #6b5232;
  border-radius: 6px;
  min-width: 280px;
  max-width: min(440px, 94vw);     /* nu depasi latimea ecranului (rezolutii mici) */
  max-height: 94vh;                 /* nici inaltimea -> corpul scrolleaza intern */
  display: flex; flex-direction: column;
  pointer-events: auto;
  box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0, 0, 0, 0.8);
}
.win-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 2px solid #3c2a1e;
  background: #1c140e;
  font-family: 'MedievalSharp', 'Cinzel', serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #f0c040;
  text-shadow: 0 1px 2px #000;
  cursor: grab;
}
.win-title .x { cursor: pointer; color: #8a8f9a; padding: 0 4px; transition: color 0.15s; }
.win-title .x:hover { color: #ff7a6a; }
.win-body {
  padding: 12px;
  max-height: 62vh;
  flex: 1 1 auto; min-height: 0; /* in fereastra flex (capata 94vh) corpul scrolleaza, nu iese din ecran */
  overflow-y: auto;
  overflow-x: hidden; /* fara scroll orizontal (swipe stanga-dreapta) — continutul se wrapeaza */
  font-size: 13px;
  background: #251c15;
  color: #e2d9cc;
}

/* Custom Scrollbar for RPG Windows */
.win-body::-webkit-scrollbar {
  width: 8px;
}
.win-body::-webkit-scrollbar-track {
  background: #1c140e;
}
.win-body::-webkit-scrollbar-thumb {
  background: #4a3826;
  border: 1px solid #6b5232;
  border-radius: 4px;
}
.win-body::-webkit-scrollbar-thumb:hover {
  background: #5a4836;
}

/* Inventar in stil Metin2: lemn/bronz intunecat, silueta cu echipament, taburi, grila 5 coloane */
.win.inv-win {
  min-width: unset; width: 226px;
  background: #251c15;
  border: 3px solid #6b5232; border-radius: 6px;
  box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0,0,0,.8);
}
/* REDESIGN (desktop): papusa STANGA + grila DREAPTA + banda de monede JOS, via grid-areas
   (nu restructuram DOM-ul cu drag&drop — doar asezam elementele existente in arii). */
body:not(.mobile) .win.inv-win { width: 452px; max-width: 452px; }
body:not(.mobile) .inv-body {
  display: grid;
  grid-template-columns: 196px 214px;   /* doll fix + grid fix (5*38 + gaps + scrollbar) — NU 1fr, ca sa nu iasa din rama */
  grid-template-areas: "doll tabs" "doll filt" "doll grid" "cur cur";
  align-content: start; gap: 8px 12px; justify-content: start;
}
body:not(.mobile) .inv-body .eq-doll-wrap { grid-area: doll; width: 200px; }
body:not(.mobile) .inv-body .inv-tabs { grid-area: tabs; justify-content: flex-end; align-self: start; }
body:not(.mobile) .inv-body .inv-filters { grid-area: filt; align-self: start; }
body:not(.mobile) .inv-body .inv-tab { flex: 0 0 auto; min-width: 34px; padding: 4px 10px; }
/* Grila e SINGURUL scroller: primeste spatiul RAMAS (1fr), iar banda de monede sta mereu vizibila jos.
   BUG reparat: grila avea max-height:62vh = exact cat .win-body -> manca tot corpul, banda de monede iesea
   sub rama, iar corpul devenea al 2-lea scroller. Cele doua scroll-uri se bateau (banda parea ca pluteste peste sloturi). */
/* height DEFINIT (nu doar max-height): fara el, `1fr` de mai jos se comporta ca `auto` si grila creste
   nelimitat, impingand banda de monede afara. Cu inaltime fixa, randul grilei primeste spatiul ramas. */
body:not(.mobile) .inv-body { height: 62vh; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; }
body:not(.mobile) .inv-body .inv-grid { max-height: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-gutter: stable; justify-content: start; }
body:not(.mobile) .inv-body .inv-grid::-webkit-scrollbar { width: 7px; }
body:not(.mobile) .inv-body .inv-grid::-webkit-scrollbar-thumb { background: #5a4326; border-radius: 4px; }
/* stretch (nu start): cu `start` grila isi lua inaltimea continutului si iesea din randul de 1fr,
   in loc sa scrolleze in el. Cu stretch umple randul si scroll-ul intern chiar functioneaza. */
/* align-content: start e OBLIGATORIU alaturi de align-self: stretch — grila e mai inalta decat continutul,
   iar `normal` (= stretch) intinde randurile auto ca sa umple inaltimea => goluri uriase intre randuri la filtrare. */
body:not(.mobile) .inv-body .inv-grid { grid-area: grid; align-self: stretch; align-content: start; }
body:not(.mobile) .inv-body .inv-currency { grid-area: cur; }
/* banda de monede (3 chip-uri) */
.inv-currency { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; border-top: 1px solid rgba(201,163,92,.25); padding-top: 8px; margin-top: 2px; }
.cur-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 8px; background: #1c120a; border: 1px solid #4b382a; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.cur-chip b { color: #f4d79a; font-variant-numeric: tabular-nums; }
.cur-chip small { color: #9a8568; }
.cur-chip .cc-ic { font-size: 13px; }
.inv-win .win-title {
  position: relative;
  color: #f0c040; border-bottom: 2px solid #3c2a1e;
  background: #1c140e;
  border-radius: 0; justify-content: center; gap: 10px;
}
.inv-win .win-title .x { position: absolute; right: 10px; }
.inv-body { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
/* Scrollbar discret cand grid-ul nu incape sub echipament (ex. fereastra scunda) */
.inv-body::-webkit-scrollbar { width: 8px; }
.inv-body::-webkit-scrollbar-thumb { background: #5a4326; border-radius: 4px; }
.inv-body::-webkit-scrollbar-track { background: transparent; }

.eq-doll {
  position: relative; height: 196px; border-radius: 7px;
  /* nisa recesata: vigneta calda spre centru-jos + fundal de piatra intunecat */
  background-color: #120d08;
  background-image:
    radial-gradient(ellipse 62% 46% at 50% 88%, rgba(120,86,44,.32), rgba(18,13,8,0) 70%),
    radial-gradient(ellipse 80% 90% at 50% 40%, rgba(44,33,20,.55), rgba(10,7,4,.85) 96%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 170'%3E%3Cg fill='%231d1811'%3E%3Ccircle cx='50' cy='18' r='12'/%3E%3Cpath d='M35 33 h30 c4 0 7 3 8 8 l5 38 -10 2 -4 -24 v45 l5 58 h-13 l-6 -48 -6 48 h-13 l5 -58 v-45 l-4 24 -10 -2 5 -38 c1 -5 4 -8 8 -8z'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center, center, center 6px;
  background-repeat: no-repeat;
  background-size: auto, auto, auto 84%;
  border: 1px solid #4a3826;
  box-shadow: inset 0 0 26px rgba(0,0,0,.78), inset 0 1px 0 rgba(201,163,92,.14);
}
/* piedestal: umbra-elipsa sub figura */
.eq-doll::after {
  content: ""; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  width: 96px; height: 16px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.6), rgba(0,0,0,0) 72%);
  pointer-events: none; z-index: 0;
}
/* caracterul TAU real, randat offscreen (gear + cosmetice), sub sloturi */
.eq-doll-model {
  position: absolute; left: 0; right: 0; top: 8px; bottom: 22px; z-index: 1;
  background-repeat: no-repeat; background-position: center bottom; background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.55));
  pointer-events: none;
}
.eq-doll-wrap { display: flex; flex-direction: column; align-items: stretch; }
.eq-cosm-btn { margin-top: 8px; width: 100%; }
/* Panou slide-in (dreapta) cu cosmetice, deschis de pe eq-doll */
.cosm-slide {
  position: fixed; top: 0; right: 0; height: 100vh; width: 320px; max-width: 86vw;
  background: #1a120a;
  border-left: 2px solid #5a4326; box-shadow: -10px 0 32px rgba(0,0,0,.6);
  z-index: 6000; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.22,.61,.36,1);
}
.cosm-slide.open { transform: translateX(0); }
.cosm-slide-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #4a3826;
  color: #d9b14a; font-weight: 700; font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 15px;
}
.cosm-slide-x {
  background: #2c2317; border: 1px solid #5a4326; color: #e8dcc4;
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px;
}
.cosm-slide-x:hover { border-color: #d9b14a; color: #fff; }
.cosm-slide-body { padding: 10px 14px; overflow-y: auto; flex: 1; }
.eq-slot {
  position: absolute; width: 40px; height: 40px; z-index: 2;
  background: rgba(12, 9, 6, 0.82); border: 1px solid #4a3826; border-radius: 4px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #6a5a44; text-align: center;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.8);
}
.eq-slot:hover { border-color: #c8a04a; }
/* slot gol: cadru discret + glif-fantoma (nu se bate cu figura din spate) */
.eq-slot.eq-empty { background: rgba(12, 9, 6, 0.5); border-style: dashed; border-color: #40321f; }
.eq-slot.eq-empty:hover { border-color: #8a6a3e; background: rgba(12, 9, 6, 0.62); }
.eq-slot .eq-ghost { font-size: 19px; opacity: .3; filter: grayscale(.5); line-height: 1; }
.eq-slot.eq-tool.eq-empty .eq-ghost { font-size: 16px; }
.eq-slot.eq-big { width: 50px; height: 66px; }
.eq-slot .icimg { width: 32px; height: 32px; }
.eq-slot.eq-big .icimg { width: 40px; height: 40px; }
/* sloturi unealta (undita/tarnacop) — mai mici, cu bordura verzuie; activ = mod curent (F1/F2/F3) */
.eq-slot.eq-tool { width: 34px; height: 34px; border-color: #3f6a3f; font-size: 15px; }
.eq-slot.eq-tool .icimg { width: 26px; height: 26px; }
.eq-slot.eq-active { border-color: #ffd24a; box-shadow: 0 0 8px rgba(255,210,74,.7), inset 0 1px 4px rgba(0,0,0,.8); }

.inv-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.inv-tab {
  flex: 1; text-align: center; padding: 3px 0; cursor: pointer;
  background: #1f1710; border: 1px solid #4a3826; border-radius: 4px;
  color: #9a8568; font-size: 11px; font-weight: 700; letter-spacing: 2px;
}
.inv-tab:hover { border-color: #7a5c3a; }
.inv-tab.active { background: #332619; color: #e6c84a; border-color: #8a6a3e; }

/* Rail de taburi AFARA din rama, lipit de marginea din stanga a ferestrei (Caracter, Clasament) */
.win-rail {
  position: absolute; right: 100%; top: 34px; /* 34px = sub placuta de titlu */
  width: 124px; flex-direction: column; flex-wrap: nowrap; gap: 3px;
  z-index: 62; /* peste ::before/::after ale ferestrei (60/61) */
}
.win-rail .inv-tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  text-align: left; padding: 8px 10px; letter-spacing: 0.4px; font-size: 12px;
  /* textura de lemn ca rama ferestrei. background-color SEPARAT de imagini: skin-ul de taburi
     (:root.skin-tabs .inv-tab) rescrie background-image, iar fara culoare placa ramanea transparenta. */
  background-color: #3e2c1c;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #4e3824, #2e2014);
  border: 2px solid #1a120b; border-right: none; border-radius: 3px 0 0 3px;
  box-shadow: inset 1px 1px 0 rgba(138,106,68,.55), -3px 3px 0 rgba(18,14,10,.55);
  color: #c8b89a;
}
.win-rail .inv-tab:hover {
  background-color: #4c371f;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #60462c, #3c2a1a);
  color: #ffd985;
}
.win-rail .inv-tab.active {
  background-color: #5d4429;
  background-image:
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #7a5c3d, #48321e);
  color: #ffd76a; border-color: #c9a35c; margin-right: -2px; padding-right: 12px; /* se lipeste de rama */
}
.win-rail .ct-ic { font-size: 14px; line-height: 1; width: 16px; text-align: center; letter-spacing: 0; flex: 0 0 16px; }
.win-rail .ct-ic svg, .win-rail .ct-ic img { display: block; margin: 0 auto; }
.win-rail .ct-lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* pe mobil n-ai loc afara -> taburile revin INAUNTRU, pe rand, doar iconite */
body.mobile .win-rail {
  position: static; width: auto; flex-direction: row; flex-wrap: wrap;
  margin: 6px 8px 0; /* copil direct al .win (flex column); corpul trece dupa el via order */
}
body.mobile .rail-win .win-body { order: 1; }
body.mobile .win-rail .inv-tab {
  flex: 1 1 auto; justify-content: center; padding: 6px; border-right: 2px solid #1a120b; border-radius: 3px;
  box-shadow: none; margin-right: 0;
}
body.mobile .win-rail .ct-lb { display: none; }

/* rand de filtre inventar — butoane icon-only (compacte, nu ies din rama) */
.inv-filters { display: flex; gap: 5px; }
.inv-filter-btn { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 16px; line-height: 1; background: #1f1710; border: 1px solid #4a3826; border-radius: 3px; color: #cbb890; }
.inv-filter-btn:hover { border-color: #7a5c3a; filter: brightness(1.15); }
.inv-filter-btn.active { background: #332619; color: #e6c84a; border-color: #c8a04a; box-shadow: inset 0 0 6px rgba(201,163,92,.3); }
.inv-search-row { display: flex; gap: 4px; margin: 4px 0 6px; }
.inv-search { flex: 1; padding: 5px 8px; background: #1f1710; border: 1px solid #4a3826; border-radius: 3px; color: #e2d9cc; font-size: 12px; font-family: 'Outfit', sans-serif; }
.inv-search:focus { outline: none; border-color: #c8a04a; box-shadow: inset 0 0 6px rgba(201,163,92,.25); }
.inv-search::placeholder { color: #8a7a63; }
.inv-search-clr { width: 28px; background: #1f1710; border: 1px solid #4a3826; border-radius: 3px; color: #cbb890; cursor: pointer; font-size: 13px; }
.inv-search-clr:hover { border-color: #d07070; color: #ff9a8a; }
#tut-hint {
  position: fixed; left: 50%; bottom: 130px; transform: translateX(-50%);
  padding: 10px 20px; z-index: 9200; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,20,10,.95), rgba(50,32,16,.95));
  border: 2px solid #c8a04a; border-radius: 8px;
  color: #ffe08a; font-size: 16px; font-weight: 700; text-shadow: 0 2px 4px #000;
  box-shadow: 0 4px 16px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,140,.15);
  font-family: 'MedievalSharp', 'Cinzel', serif; letter-spacing: .3px;
  animation: tutHintPulse 1.4s ease-in-out infinite;
}
@keyframes tutHintPulse { 0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 0 rgba(255,208,120,0); } 50% { box-shadow: 0 4px 16px rgba(0,0,0,.6), 0 0 20px rgba(255,208,120,.4); } }
/* modal Renaștere: alegere PvP/PvM la prima renaștere (R0→R1) */
.rb-path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.rb-path.rb-choice { padding: 14px 16px; background: #1a110a; border: 1px solid #6b5232; border-radius: 8px; display: flex; flex-direction: column; margin-bottom: 0; box-shadow: inset 0 1px 0 rgba(255,208,120,.06), 0 3px 8px rgba(0,0,0,.4); }
.rb-path.rb-choice:hover { border-color: #c8a04a; box-shadow: inset 0 1px 0 rgba(255,208,120,.12), 0 3px 8px rgba(0,0,0,.4), 0 0 14px rgba(200,160,74,.35); }
.rb-choice .rb-path-h { font-size: 16px; color: #ffd76a; margin-bottom: 4px; text-shadow: 0 1px 2px #000; }
.rb-choice .rb-path-h b { color: #ffe08a; }
.rb-choice .muted { color: #b8a887 !important; }
.rb-choice .rb-line { color: #e8dcc4; font-size: 12.5px; line-height: 1.5; padding: 3px 0; }
.rb-choice .rb-line.rb-earned { color: #a8e6a8; text-decoration: none; opacity: 1; }
@media (max-width: 640px) { .rb-path-grid { grid-template-columns: 1fr; } }
/* Clanuri Faza 2: perks + top clanuri */
.guild-perks { margin: 6px 0 8px; border: 1px solid #4a3826; border-radius: 6px; background: rgba(0,0,0,.18); padding: 4px 8px; }
.guild-perks summary { cursor: pointer; color: #d9b14a; font-weight: 700; font-size: 12.5px; padding: 3px 0; }
.gp-row { font-size: 12px; padding: 3px 4px; }
.gp-row.on { color: #a8e6a8; }
.gp-row.off { color: #8a7a63; }
.guild-shop { margin: 6px 0 8px; border: 1px solid #4a3826; border-radius: 6px; background: rgba(0,0,0,.18); padding: 4px 8px; }
.guild-shop summary { cursor: pointer; color: #d9b14a; font-weight: 700; font-size: 12.5px; padding: 3px 0; }
.gs-active { color: #a8e6a8; font-size: 12.5px; padding: 4px 2px; }
.gs-row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 2px; border-top: 1px solid #3c2a1e; }
.gs-nm { flex: 1; min-width: 0; }
.gs-cost { color: #e6c84a; white-space: nowrap; }
.gs-cost.bad { color: #ff7a6a; }
.gs-note { font-size: 11px; padding: 4px 2px; }
/* inspectare echipament + magazin bot: SUB foaia de detalii mobila (#mob-sheet, z 500) — tap pe item deschide sheet-ul PESTE */
#inspect-modal, #botshop-modal { z-index: 480; }
/* 🛠 Workbench Nicovală: 2 sloturi mari + preview + grid 9x9 filtrat */
.win.wbench-win { width: min(360px, 94vw); max-width: min(360px, 94vw); }
.wbench-win .win-body { padding: 10px 12px; }
.wb-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.wb-slot { position: relative; min-height: 74px; padding: 6px; border: 2px dashed #6b5232; border-radius: 6px; background: rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.wb-slot.piece { border-color: #7a5c3a; }
.wb-slot.consum { border-color: #b06adf; }
.wb-slot.filled { border-style: solid; background: rgba(20,12,6,.55); }
.wb-slot .wb-ic { width: 40px; height: 40px; image-rendering: pixelated; }
.wb-slot .wb-plus { position: absolute; top: 2px; left: 4px; color: #ffd24a; font-weight: 700; font-size: 11px; text-shadow: 0 1px 2px #000; }
.wb-slot .wb-clr { position: absolute; top: 2px; right: 4px; background: none; border: none; color: #ff7a6a; cursor: pointer; font-size: 14px; padding: 0 4px; }
.wb-slot .wb-nm { font-size: 11px; color: #e8dcc4; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-slot .wb-empty { color: #8a7a63; font-size: 11px; font-style: italic; text-align: center; }
.wb-preview { text-align: center; margin: 6px 0 8px; font-size: 12.5px; padding: 6px 8px; background: rgba(0,0,0,.2); border-radius: 4px; }
.wb-preview .wb-ok { color: #8fffa0; }
.wb-preview .wb-bad { color: #ff7a6a; }
.wb-act { display: block; width: 100%; margin: 0 0 10px; padding: 8px 12px; }
.wb-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 2px; padding: 4px; background: rgba(0,0,0,.3); border: 1px solid #4a3826; border-radius: 4px; }
.wb-cell { aspect-ratio: 1; background: #1a110a; border: 1px solid #2a1f14; border-radius: 3px; position: relative; display: flex; align-items: center; justify-content: center; }
.wb-cell.wb-cell-full { cursor: pointer; }
.wb-cell.wb-cell-full:hover { border-color: #c8a04a; box-shadow: inset 0 0 4px rgba(200,160,74,.4); }
.wb-cell.wb-piece.wb-cell-full { border-color: #7a5c3a; }
.wb-cell.wb-consum.wb-cell-full { border-color: #7a3a8a; }
.wb-cell img { width: 22px; height: 22px; image-rendering: pixelated; }
.wb-cplus { position: absolute; top: 0; left: 1px; color: #ffd24a; font-size: 8px; font-weight: 700; text-shadow: 0 1px 1px #000; }
.wb-cn { position: absolute; bottom: 0; right: 1px; color: #ffe08a; font-size: 8px; font-weight: 700; text-shadow: 0 1px 1px #000; }
.wb-hint { font-size: 10.5px; text-align: center; margin: 6px 0 0; }
.mobile .win.wbench-win { width: 96vw; max-width: 96vw; z-index: 130; } /* peste inventar (z 121) — altfel inventarul se vede pe deasupra */
/* 🌀 harta si buton teleport in roster de clan */
.g-map { font-size: 10.5px; margin-left: 6px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; flex-shrink: 1; min-width: 0; }
/* numele nu se micsoreaza sub o latime lizibila cand randul are butoane (teleport/promoveaza/kick) -> harta cedeaza spatiu, nu numele */
.guild-win .fr-nm { min-width: 56px; }
.g-tp { padding: 2px 6px; font-size: 12px; }
/* 🔮 Skill-uri de Clan: bar energie + carduri skill */
.guild-skills .g-energy { position: relative; height: 12px; background: #0d0906; border: 1px solid #4a3826; border-radius: 3px; overflow: hidden; margin: 6px 0 8px; }
.guild-skills .g-energy .fill { height: 100%; background: linear-gradient(90deg, #4a7ac8, #86b9ff); }
.guild-skills .g-energy .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #e8f0ff; text-shadow: 0 1px 1px #000; font-weight: 700; }
.gs-skill { border: 1px solid #4a3826; border-radius: 5px; background: rgba(0,0,0,.2); padding: 6px 8px; margin: 4px 0; display: flex; flex-direction: column; gap: 3px; }
.gs-skill.on { border-color: #7a5cd0; background: rgba(120,60,200,.10); }
.gs-skill .gss-h { font-size: 12.5px; }
.gs-skill .gss-desc { font-size: 11px; line-height: 1.4; }
.gs-skill .gss-meta { font-size: 10.5px; }
.gs-skill .gss-meta.bad { color: #ff9a8a; }
.gs-skill .rpg-btn { align-self: flex-start; }
/* ⚔ GvG: banner de razboi in fereastra clanului */
.guild-war { margin: 6px 0 8px; border: 1px solid #7a2f22; border-radius: 6px; background: rgba(120,30,20,.15); padding: 8px 10px; text-align: center; }
.guild-war.challenge { border-color: #c8a04a; background: rgba(200,160,74,.10); }
.gw-head { color: #ff9a8a; font-weight: 700; font-size: 13px; }
.guild-war.challenge .gw-head { color: #ffd76a; }
.gw-score { font-size: 26px; font-weight: 900; font-family: 'MedievalSharp', 'Cinzel', serif; margin: 4px 0; color: #e8dcc4; }
.gw-score .mine { color: #8fffa0; }
.gw-score .theirs { color: #ff7a6a; }
.gw-meta { font-size: 11px; }
.guild-war button { margin: 6px 4px 0; }
/* 🦝 Pickpocket: overlay minijoc de timing */
#pp-overlay { position: fixed; inset: 0; z-index: 9350; background: rgba(0,0,0,.55); display: grid; place-items: center; }
.pp-box { width: min(440px, 92vw); background: #251c15; border: 3px solid #6b5232; border-radius: 8px; padding: 18px 20px; box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0,0,0,.8); text-align: center; }
.pp-title { color: #ffd76a; font-size: 18px; font-weight: 700; margin-bottom: 14px; text-shadow: 0 1px 2px #000; }
.pp-bar { position: relative; height: 26px; background: #14100b; border: 2px solid #4a3826; border-radius: 6px; overflow: hidden; }
.pp-window { position: absolute; top: 0; bottom: 0; background: rgba(90,200,90,.35); border-left: 1px solid #4a9a4a; border-right: 1px solid #4a9a4a; }
.pp-marker { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #ffd24a; box-shadow: 0 0 8px rgba(255,210,74,.8); }
.pp-hint { margin-top: 10px; color: #bca080; font-size: 12.5px; }
.pp-result { font-size: 20px; font-weight: 800; font-family: 'MedievalSharp', 'Cinzel', serif; padding: 14px 0; animation: bbPop .3s ease-out; }
.pp-result.pp-win { color: #8fffa0; }
.pp-result.pp-lose { color: #ff7a6a; }
/* Buzunareste-l: actiune mare, "periculoasa" — nu un buton mic pierdut in lista */
.pp-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 2px; padding: 9px 12px; text-align: left;
  background: linear-gradient(180deg, #5a2a18, #3a1a0e); border-color: #8a4a28; box-shadow: inset 1px 1px 0 rgba(200,110,60,.45); }
.pp-btn:hover { background: linear-gradient(180deg, #6e3520, #4a2212); border-color: #c07040; }
.pp-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; filter: drop-shadow(0 1px 2px #000); }
.pp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pp-txt b { font-variant: small-caps; letter-spacing: .6px; font-size: 14px; color: #ffcf8a; }
.pp-txt small { font-size: 10.5px; color: #c09a78; font-variant: normal; letter-spacing: 0; }
.pp-btn.pulse { animation: pp-pulse 1.5s ease-in-out infinite; }
@keyframes pp-pulse {
  0%, 100% { box-shadow: inset 1px 1px 0 rgba(200,110,60,.45), 0 0 0 0 rgba(255,180,90,.6); }
  50%      { box-shadow: inset 1px 1px 0 rgba(200,110,60,.45), 0 0 0 7px rgba(255,180,90,0); border-color: #ffc070; }
}
@media (prefers-reduced-motion: reduce) { .pp-btn.pulse { animation: none; border-color: #ffc070; } }
.gbr-row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid #3c2a1e; font-size: 13px; }
.gbr-row.top3 { background: rgba(200,160,74,.08); }
.gbr-rank { width: 28px; text-align: center; flex: 0 0 auto; }
.gbr-name { color: #ffe08a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbr-meta { margin-left: auto; white-space: nowrap; font-size: 11.5px; }
/* contor de spatii */
.inv-space { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #9a8568; padding: 3px 8px; }
.inv-space b { color: #e6c84a; font-variant-numeric: tabular-nums; }
.inv-space.full b { color: #ff7a5a; }
body:not(.mobile) .inv-body .inv-tabs { justify-content: space-between; align-items: center; }
/* slot estompat de filtru (nu se potriveste) — inca interactiv (drag/hover), dar sters vizual */
.inv-slot.inv-dim { opacity: 0.22; filter: grayscale(0.6); }
.inv-slot.inv-dim:hover { opacity: 0.6; }
.eq-pet-btn { margin-top: 5px; }
/* rand pet: picker (🐾 Pet) + comutator pornit/oprit, unul langa altul */
.eq-pet-row { display: flex; gap: 5px; margin-top: 5px; }
.eq-pet-row .eq-pet-btn { flex: 1; margin-top: 0; }
.eq-pet-toggle { flex: 0 0 auto; margin-top: 0; width: 38px; padding: 6px 0; font-size: 13px; }
.eq-pet-toggle.on  { background: #7a3a2a; border-color: #b05a3a; } /* pornit -> ✕ oprește (rosu) */
.eq-pet-toggle.off { background: #2e7d32; border-color: #4caf50; } /* oprit  -> ▶ pornește (verde) */
.eq-pet-toggle.on:hover  { background: #914633; }
.eq-pet-toggle.off:hover { background: #388e3c; }
.inv-grid { display: grid; grid-template-columns: repeat(5, 38px); gap: 2px; justify-content: center; }
.inv-slot {
  width: 38px; height: 38px; background: #0e0b08; border: 1px solid #33281a; border-radius: 3px;
  position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.85);
}
.inv-slot:hover { border-color: #c8a04a; }
/* item NOU (picat/primit) — glow auriu pulsand + colt stralucitor, pana la primul hover */
.inv-slot.new-item { border-color: #ffd24a; animation: newItemGlow 1.1s ease-in-out infinite; z-index: 2; }

/* ---------- Barbut (zaruri pe pariu) ---------- */
.barbut-win .win-body { width: min(420px, 94vw); max-width: none; }
.bb-pot { text-align: center; color: #ffe27a; margin-bottom: 10px; font-size: 14px; }
.bb-arena { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(0,0,0,.25); border: 1px solid #5a4326; border-radius: 8px; padding: 12px 8px; }
.bb-side { flex: 1; text-align: center; }
.bb-who { font-weight: 700; color: #e8dcc4; margin-bottom: 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-vs { color: #d9b14a; font-weight: 900; font-family: 'MedievalSharp', 'Cinzel', serif; }
.bb-dice { display: flex; gap: 6px; justify-content: center; }
.bb-dice.idle { opacity: .4; }
.bb-die { width: 34px; height: 34px; background: #ecdfc0; border-radius: 7px; box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 2px 3px rgba(0,0,0,.5); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 4px; gap: 1px; }
.bb-pip { width: 6px; height: 6px; border-radius: 50%; align-self: center; justify-self: center; }
.bb-pip.on { background: #2a2018; box-shadow: inset 0 1px 1px rgba(0,0,0,.6); }
.bb-wins { margin-top: 8px; letter-spacing: 3px; color: #ffd24a; font-size: 14px; }
.bb-status { text-align: center; margin-top: 10px; font-weight: 700; color: #ffcf5a; min-height: 20px; }
.bb-roll[disabled] { opacity: .6; cursor: default; }
/* ecran de rezultat: banner cu castigatorul */
/* bannerul de rezultat = OVERLAY centrat peste arena (inaltimea ferestrei ramane constanta -> nu iese din rama) */
.bb-result { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 10px; border-radius: 8px; font-size: 16px; font-weight: 800; font-family: 'MedievalSharp', 'Cinzel', serif; animation: bbPop .3s ease-out; }
.bb-result.bb-win { color: #8fffa0; background: rgba(18,30,16,.92); border: 1px solid #3a8a4a; }
.bb-result.bb-lose { color: #ff7a6a; background: rgba(30,14,12,.92); border: 1px solid #8a3a30; }
.bb-result.cancel { color: #bca080; background: rgba(12,9,6,.92); border: 1px solid #5a4326; font-size: 14px; }
.bb-result .bb-prize { color: #ffd24a; }
.bb-side.bb-winner { background: rgba(255,207,90,.12); border-radius: 8px; box-shadow: 0 0 0 2px #ffcf5a inset; }
.bb-side.bb-winner .bb-who { color: #ffcf5a; }
@keyframes bbPop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Reborn paths (tab Renaștere) ---------- */
.rb-path { border: 1px solid #5a4326; border-radius: 8px; padding: 9px 11px; margin-bottom: 9px; background: rgba(0,0,0,.2); }
.rb-path.active { border-color: #c886ff; box-shadow: 0 0 7px rgba(200,134,255,.3); background: rgba(120,60,160,.12); }
.rb-path-h { font-size: 14px; color: #e8dcc4; }
.rb-line { font-size: 12px; color: #cbb890; padding: 2px 0 2px 8px; }
.rb-line::before { content: "✦ "; color: #d9b14a; }
/* tier deja OBȚINUT pe calea ta: tăiat + estompat (îl ai deja) */
.rb-line.rb-earned { color: #9a8c6a; text-decoration: line-through; text-decoration-color: #6a5a2a; }
.rb-line.rb-earned::before { content: ""; }
/* următorul tier de deblocat: evidențiat auriu */
.rb-line.rb-next { color: #ffe08a; font-weight: 700; }
.rb-line.rb-next::before { content: ""; }

/* ---------- Battle Pass: Trecerea Sezonului ---------- */
.bp-win { max-height: 90vh; width: min(660px, 96vw); max-width: min(660px, 96vw); display: flex; flex-direction: column; }
.bp-win .win-body { width: 100%; max-width: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bp-head { background: rgba(0,0,0,.25); border: 1px solid #5a4326; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.bp-head-row { display: flex; justify-content: space-between; align-items: baseline; }
.bp-tier { color: #ffd24a; font-size: 18px; }
.bp-sp { color: #ffe27a; font-weight: 700; }
.bp-bar { position: relative; height: 16px; background: #1c140a; border: 1px solid #5a4326; border-radius: 8px; margin: 7px 0; overflow: hidden; }
.bp-bar-fill { height: 100%; background: #d8a93a; transition: width .3s; }
/* Prestigiu (tier > 50): alta culoare, ca sa se vada ca esti peste traseul cu recompense */
.bp-bar.prestige .bp-bar-fill { background: linear-gradient(90deg, #8b6ad0, #c9a4ff); }
.bp-prestige { color: #c9a4ff; font-size: 12px; font-weight: 700; margin-left: 6px; }
/* Fierărie: bonusurile instanței (aceleași linii ca în tooltipul din inventar) */
.smith-extra { margin-top: 6px; padding-top: 6px; border-top: 1px solid #4a3826; font-size: 12px; line-height: 1.5; }
/* antetul unei pagini de prestigiu (51-60, 61-70, ...) */
.bp-collapse.bp-prestige-head { color: #c9a4ff; border-color: #6d5399;
  background: linear-gradient(#2e2340, #241a33); background-image: none; font-weight: 700; }
.bp-bar-lbl { position: absolute; inset: 0; text-align: center; font-size: 11px; line-height: 16px; color: #fff; text-shadow: 0 1px 2px #000; }
.bp-prem-on { color: #ffd24a; font-weight: 700; text-align: center; margin-top: 4px; }
.bp-prem-on.bp-vip {
  background: linear-gradient(180deg, #7a1f18, #4a1610);
  color: #fff2c9; border: 1px solid #c9a35c; border-radius: 6px;
  padding: 6px 10px; text-shadow: 0 1px 2px #000;
  animation: bpVipPulse 2.4s ease-in-out infinite;
}
@keyframes bpVipPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(201,163,92,0.4); }
  50% { box-shadow: 0 0 14px rgba(255,215,74,0.7); }
}
.bp-buy { width: 100%; margin-top: 4px; }
.bp-section-h { font-size: 12px; font-weight: 800; color: #e6c84a; text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 6px; border-bottom: 1px solid #3c2a1e; padding-bottom: 3px; }
.bp-quest { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 7px; border-radius: 6px; background: rgba(0,0,0,.2); margin-bottom: 5px; }
.bp-quest.claimed { opacity: .55; }
.bp-q-per { display: inline-block; font-size: 10px; background: #5a4326; color: #ffe27a; border-radius: 4px; padding: 1px 5px; margin-right: 4px; }
.bp-q-per.weekend { background: #6a2a94; color: #f0d0ff; } /* misiune de weekend — evidentiata */
.bp-q-side { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.bp-q-sp { color: #ffd24a; font-weight: 700; }
.bp-track { display: flex; flex-direction: column; gap: 4px; }
.bp-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: stretch; }
.bp-tnum { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #8a7350; background: rgba(0,0,0,.25); border-radius: 6px; }
.bp-row.unlocked .bp-tnum { color: #ffd24a; }
.bp-cell { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,.18); border: 1px solid transparent; min-height: 30px; }
.bp-cell.prem { background: rgba(70,40,90,.22); }
.bp-cell.ready { border-color: #ffd24a; box-shadow: 0 0 6px rgba(255,210,74,.35); }
.bp-cell.claimed { opacity: .5; }
.bp-sum-toggle { width: 100%; margin-top: 6px; background: rgba(0,0,0,.25); border: 1px solid #5a4326; color: #d9b14a; border-radius: 6px; padding: 5px; font-size: 12px; cursor: pointer; }
.bp-sum-toggle:hover { background: rgba(255,210,74,.1); }
.bp-summary { background: rgba(0,0,0,.25); border: 1px solid #5a4326; border-radius: 8px; padding: 10px; margin-bottom: 10px; }
.bp-sum-cols { display: flex; gap: 10px; }
.bp-sum-col { flex: 1; min-width: 0; }
.bp-sum-col.prem { border-left: 1px solid #5a4326; padding-left: 10px; }
.bp-sum-h { font-weight: 700; color: #ffd24a; margin-bottom: 5px; font-size: 12px; }
.bp-sum-line { font-size: 12px; color: #e8dcc4; padding: 2px 0; }
.bp-collapse { display: flex; justify-content: space-between; align-items: center; padding: 5px 10px; background: rgba(255,210,74,.06); border: 1px dashed #5a4326; border-radius: 6px; color: #9a8a6a; font-size: 12px; cursor: pointer; user-select: none; }
.bp-collapse:hover { background: rgba(255,210,74,.12); color: #c8b890; }
.bp-collapse-tog { color: #d9b14a; }
/* badge punct pe butonul 🎟️ Sezon (ceva de revendicat) */
[data-seasonbadge] { position: absolute; top: 2px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ffd24a; box-shadow: 0 0 6px #ffb02e, 0 0 2px #000; border: 1px solid #2a2018; animation: newItemSpark 1.2s ease-in-out infinite; }
.bp-chip { font-size: 12px; color: #e8dcc4; }
.bp-chip.bp-empty { color: #6a5a40; }
.bp-lock { opacity: .6; }
.bp-ck { font-size: 14px; }
.inv-slot.new-item::after { content: "✦"; position: absolute; top: -5px; right: -3px; font-size: 11px; color: #fff3c0; text-shadow: 0 0 5px #ffd24a, 0 0 9px #ffb02e; animation: newItemSpark 1.1s ease-in-out infinite; pointer-events: none; }
@keyframes newItemGlow {
  0%, 100% { box-shadow: inset 0 1px 4px rgba(0,0,0,.85), 0 0 5px rgba(255,210,74,.55); }
  50%      { box-shadow: inset 0 1px 4px rgba(0,0,0,.85), 0 0 13px rgba(255,210,74,.95), 0 0 4px rgba(255,255,255,.6); }
}
@keyframes newItemSpark { 0%, 100% { opacity: .6; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
.inv-slot .ic { width: 24px; height: 24px; border-radius: 3px; }
.inv-slot .icimg { width: 30px; height: 30px; }
/* iconitele nu intercepteaza mouse-ul si nu pornesc drag nativ — slotul (div) gestioneaza tot */
.inv-slot img, .hot-slot img, .eq-slot img, .skill-icon-container img, #inv-drag-ghost img {
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.inv-slot .ct { position: absolute; bottom: 0; right: 2px; font-size: 10px; color: #8f8; text-shadow: 0 1px 2px #000; }
.inv-slot .pl { position: absolute; top: 0; left: 2px; font-size: 9px; color: #e6c84a; text-shadow: 0 1px 2px #000; }
.inv-slot .bn { position: absolute; top: -1px; right: 1px; font-size: 8px; color: #b8a0ff; }
.shop-ic { width: 34px; height: 34px; vertical-align: middle; margin-right: 6px; padding: 2px; background: #0e0b08; border: 1px solid #33281a; border-radius: 4px; box-shadow: inset 0 1px 4px rgba(0,0,0,.85); }

/* ---- Banca ---- */
/* Inventarul afisat INTREG (fara scroll) pe DESKTOP: grid fix de 40 sloturi incape sub 94vh */
#win-inv .win-body { max-height: none; overflow-y: visible; }
/* pe MOBIL ecranul e mic -> readu scroll-ul ca sa ajungi la toate sloturile */
.mobile #win-inv .win-body { max-height: 80vh; overflow-y: auto; }
.mobile .inv-body { max-height: 76vh; overflow-y: auto; }
/* ===== Bancă — redesign B (Silver + iteme, grilă seif cu raritate) ===== */
.bank-win .win-body { min-width: 300px; max-width: 480px; }
.bank-lock { text-align: center; padding: 22px 12px 12px; }
.bank-lock .bl-emj { font-size: 46px; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.bank-lock .bl-t1 { color: #ffd76a; font-size: 15px; letter-spacing: .3px; margin-bottom: 4px; }
.bank-lock .bl-t2 { font-size: 11.5px; margin-bottom: 14px; }
.bank-lock .bank-pass {
  width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 9px 10px;
  background: #0e0b08; border: 1px solid #6b5232; border-radius: 4px; color: #f0e1cf; font-family: inherit;
}
.bank-lock .bl-btn { width: 100%; padding: 10px; font-size: 13px; }

.bank-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 10px 11px; margin-bottom: 9px; border-radius: 6px;
  background: linear-gradient(135deg, #3a2a16, #26180c); border: 1px solid #6b5232;
}
.bank-head .bh-vault { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.bank-head .bh-txt { min-width: 0; }
.bank-head .bh-t1 { color: #ffd76a; font-size: 13.5px; letter-spacing: .3px; }
.bank-head .bh-t2 { font-size: 11px; margin-top: 1px; }
.bank-head .bh-total { color: #f0c040; font-size: 15px; font-weight: 700; white-space: nowrap; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.bank-head .bh-total b { color: #ffd76a; }

.bank-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.bank-tab {
  flex: 1; padding: 8px 6px; font-size: 12px; cursor: pointer;
  background: #1a130c; color: #b8a582; border: 1px solid #3c2a1e; border-radius: 5px;
  font-family: inherit;
}
.bank-tab:hover { background: #241a10; color: #e8dcc4; }
.bank-tab.on {
  background: #33240f; color: #ffd76a; border-color: #6b5232;
  box-shadow: inset 0 0 0 1px rgba(255,215,120,.2);
}

/* Silver tab */
.bank-silver-panel {
  padding: 12px; border-radius: 7px;
  background: linear-gradient(180deg, #241a10, #1a130c); border: 1px solid #6b5232;
}
.bsp-cols {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
  padding: 10px; margin-bottom: 12px;
  background: #0d0906; border: 1px solid #2a1f12; border-radius: 5px;
}
.bsp-col { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.bsp-k { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; color: #8a7a63; }
.bsp-v { font-size: 15px; color: #ffd76a; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.bsp-arrow { font-size: 22px; color: #6b5232; }
.bsp-amt {
  display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; align-items: center; justify-content: center;
}
.bsp-quick {
  padding: 5px 10px; font-size: 11px; cursor: pointer;
  background: #2a1f12; color: #cbb894; border: 1px solid #4a3625; border-radius: 4px; font-family: inherit;
}
.bsp-quick:hover { background: #3a2a1a; color: #ffd76a; }
.bsp-field {
  flex: 1; min-width: 100px; padding: 8px 10px; text-align: right;
  background: #0d0906; color: #ffd76a; font-weight: 700;
  border: 1px solid #4a3625; border-radius: 4px; font-family: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.bsp-btns { display: flex; gap: 8px; }
.bsp-btn { flex: 1; padding: 10px; font-size: 13px; }
.bsp-btn-wdr {
  background: linear-gradient(180deg, #a26a1a, #7a4d0a);
  color: #fff; border: 1px solid #4a2a08; box-shadow: 0 3px 0 #3a1e04;
}

/* Iteme tab */
.bank-hint { font-size: 11px; margin-bottom: 8px; text-align: center; }
.bank-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  padding: 8px; background: #0d0906; border: 1px solid #2a1f12; border-radius: 6px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  /* scrollul intern (max-height + overflow-y) crea al 2-lea scrollbar peste cel al .win-body.
     Renuntam la scrollul intern — foloseste scrollul ferestrei. */
}
.bank-slot {
  aspect-ratio: 1; background: #1a130c; border: 2px solid #2a1f12; border-radius: 4px;
  position: relative; display: grid; place-items: center; overflow: hidden; /* clip iconita in casuta */
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
}
.bank-slot.occupied { cursor: pointer; }
.bank-slot.occupied:hover { border-color: #c8a04a; transform: translateY(-1px); }
.bank-slot.rar-common    { border-color: #6b6a5a; }
.bank-slot.rar-uncommon  { border-color: #3fbf3f; }
.bank-slot.rar-rare      { border-color: #4d9fff; }
.bank-slot.rar-epic      { border-color: #b055e8; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 6px rgba(176,85,232,.2); }
.bank-slot.rar-legendary { border-color: #ff9022; box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 8px rgba(255,144,34,.28); }
.bank-slot .icimg { width: 78%; height: 78%; image-rendering: pixelated; pointer-events: none; }
.bank-slot .ct { position: absolute; bottom: 1px; right: 3px; font-size: 10px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
.bank-slot .pl { position: absolute; top: 1px; left: 3px; font-size: 10px; color: #ffd76a; font-weight: 700; text-shadow: 0 1px 2px #000; }
.bank-slot .bn { position: absolute; top: -2px; right: 2px; font-size: 10px; color: #b8a0ff; text-shadow: 0 0 4px rgba(184,160,255,.6); }
.mobile .bank-grid { grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 5px; }
.mobile .bank-slot { min-height: 0; aspect-ratio: 1; }
.mobile .bank-slot .icimg { width: 70%; height: 70%; }
.mobile .bank-head .bh-vault { font-size: 26px; }
.mobile .bsp-cols { grid-template-columns: 1fr; }
.mobile .bsp-arrow { transform: rotate(90deg); font-size: 18px; }
.mobile .bsp-quick { min-height: 34px; }
.mobile .bsp-field { min-height: 40px; }
.mobile .bsp-btn { min-height: 44px; }

/* ---- Titluri (tab Caracter) ---- */
.title-row { padding: 7px 8px; border: 1px solid #2a1f12; border-radius: 4px; margin-bottom: 6px; background: #1a130c; }
.title-row:hover { border-color: #6b5232; }
.title-row.active { border-color: #c89f5c; background: rgba(200,159,92,.14); box-shadow: inset 0 0 0 1px rgba(200,159,92,.3); }
.title-row.locked { opacity: .72; }
.title-main { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.title-name { font-weight: 700; color: #f0e1cf; font-size: 13px; }
.title-row.locked .title-name { color: #9a8568; }
.title-row.active .title-name { color: #ffd766; }
.title-desc { font-size: 11px; color: #b9a88f; margin-top: 3px; }
.title-use { padding: 2px 10px; font-size: 11px; }

/* ---- Confirmare aruncare obiect ---- */
#drop-modal { position: fixed; inset: 0; z-index: 402; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.drop-box { background: #241a0f; border: 2px solid #8a6a3e; border-radius: 12px; padding: 18px 22px; text-align: center; color: #f0e1cf; max-width: 300px; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.drop-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 17px; color: #ffcf5a; margin-bottom: 10px; }
.drop-item { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; margin-bottom: 12px; }
.drop-item .icimg { width: 28px; height: 28px; }
.drop-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.drop-btns .rpg-btn { padding: 6px 12px; font-size: 13px; }
.drop-note { font-size: 11px; margin-top: 10px; line-height: 1.3; }
.rpg-btn.danger, .mob-act.danger { background: #7a2420; border-color: #4a1410; }

/* ---- Tutorial per-NPC ---- */
#npctut-modal { position: fixed; inset: 0; z-index: 403; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.npctut-box { background: #241a0f; border: 2px solid #b5762c; border-radius: 12px; padding: 18px 22px; max-width: 460px; text-align: center; color: #f0e1cf; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.npctut-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 18px; color: #ffcf5a; margin-bottom: 8px; }
.npctut-body { font-size: 13px; line-height: 1.45; color: #e2d4bf; margin-bottom: 14px; text-align: left; max-height: 62vh; overflow-y: auto; }
.npctut-body i { color: #d9b14a; } /* replica NPC-ului */
.npctut-body b { color: #f0c040; }
.npctut-box .rpg-btn { padding: 7px 16px; }

/* ---- Clasament global ---- */
#win-lb .win-body { min-width: 250px; max-width: 300px; }
.lb-list { display: flex; flex-direction: column; gap: 3px; }
.lb-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px; background: #1a130c; border: 1px solid #2a1f12; border-radius: 4px; }
.lb-row:hover { border-color: #6b5232; }
.lb-row.top { background: #241b12; border-color: #c8a04a; }
.lb-pos { width: 24px; text-align: center; font-size: 15px; }
.lb-rank { color: #9a8568; font-size: 12px; }
.lb-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-name.lb-team { color: #cfe0ff; font-weight: 500; font-size: 12px; } /* echipa: mai multe nume pe un rand */
.lb-val { color: #ffd766; font-weight: 700; }
.lb-eye { flex: 0 0 auto; width: 26px; height: 24px; padding: 0; font-size: 13px; line-height: 1; opacity: .7; cursor: pointer; }
.lb-eye:hover { opacity: 1; }
.inv-sort { background: #2a1f12; color: #ffd24a; }
.inv-sort:hover { border-color: #c89f5c; }

/* badge Tier-2 (combo de set: coif upgradeaza skill-ul colierului/inelului) */
.sp-t2 { margin-left: 6px; padding: 1px 6px; border-radius: 4px; font-size: 9px; font-weight: 900; letter-spacing: .5px; color: #1a1008; background: #e8b545; box-shadow: 0 0 6px rgba(255,176,46,.6); vertical-align: middle; }
.hot-slot.t2-combo { border-color: #ffb02e !important; box-shadow: 0 0 8px rgba(255,176,46,.7), inset 2px 2px 0 rgba(0,0,0,0.55); }
.t2-badge { position: absolute; top: -4px; left: -4px; background: #e8b545; color: #1a1008; font-size: 9px; font-weight: 900; border-radius: 4px; padding: 0 3px; line-height: 13px; box-shadow: 0 0 5px rgba(255,176,46,.8); }
/* ULTIMATA T3: toate 4 piesele din aceeasi familie — slot violet incandescent, badge III pulsatoriu */
.hot-slot.t3-combo { border-color: #c86bff !important; box-shadow: 0 0 12px rgba(200,107,255,.9), inset 2px 2px 0 rgba(0,0,0,0.55); animation: t3Pulse 1.6s ease-in-out infinite; }
.t3-badge { background: #a85ae0; color: #fff; box-shadow: 0 0 7px rgba(200,107,255,.95); }
@keyframes t3Pulse { 0%,100% { box-shadow: 0 0 8px rgba(200,107,255,.6), inset 2px 2px 0 rgba(0,0,0,0.55); } 50% { box-shadow: 0 0 16px rgba(200,107,255,1), inset 2px 2px 0 rgba(0,0,0,0.55); } }
/* badge cu numarul de incarcari disponibile (ex. Dublu Salt = 2). Albastru = ai incarcari; gri = 0. */
.chg-badge { position: absolute; top: -4px; right: -4px; background: #4a9be0; color: #061018; font-size: 10px; font-weight: 900; border-radius: 50%; min-width: 15px; height: 15px; line-height: 15px; text-align: center; box-shadow: 0 0 5px rgba(108,196,255,.8); }
.hot-slot .chg-badge { z-index: 4; }

/* ---- Misiuni zilnice ---- */
#win-daily .win-body { min-width: 260px; max-width: 320px; }
.daily-row { padding: 8px; border: 1px solid #2a1f12; border-radius: 4px; margin-bottom: 7px; background: #1a130c; }
.daily-row:hover { border-color: #6b5232; }
.daily-row.done { border-color: #5a7a3a; background: rgba(120,180,90,.08); }
.daily-top { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.daily-desc { font-weight: 600; color: #f0e1cf; }
.daily-prog { color: #ffd766; font-weight: 700; }
.daily-bar { height: 8px; background: #0f0b07; border: 1px solid #3c2a1e; border-radius: 4px; overflow: hidden; margin: 5px 0; }
.daily-fill { height: 100%; background: #d8a93a; transition: width .3s; }
.daily-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.daily-rw { font-size: 11px; }
.daily-claim { padding: 3px 12px; font-size: 12px; }

/* ---- Împărțire teanc ---- */
#split-modal { position: fixed; inset: 0; z-index: 402; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; }
.split-box { background: #241a0f; border: 2px solid #8a6a3e; border-radius: 12px; padding: 18px 22px; text-align: center; color: #f0e1cf; min-width: 250px; max-width: 300px; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.split-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 17px; color: #ffcf5a; margin-bottom: 10px; }
.split-item { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; margin-bottom: 12px; }
.split-item .icimg { width: 26px; height: 26px; }
.split-range { width: 100%; margin: 4px 0 10px; accent-color: #c89f5c; }
.split-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.split-num { width: 80px; text-align: center; padding: 6px; background: #0e0b08; border: 1px solid #6b5232; border-radius: 4px; color: #f0e1cf; }
.split-step { padding: 4px 12px; font-size: 16px; line-height: 1; }
.split-info { font-size: 12px; margin-bottom: 12px; min-height: 14px; }
.split-btns { display: flex; gap: 8px; justify-content: center; }
.split-btns .rpg-btn { padding: 6px 14px; font-size: 13px; }

.inv-yang {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  padding: 5px 8px; font-size: 12px; font-weight: 700; color: #e6c84a;
  background: #18120b; border: 1px solid #3a2d1e; border-radius: 4px;
  text-shadow: 0 1px 2px #000;
}
.inv-yang .coin { color: #f0c040; font-size: 10px; }

.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; }
/* Viteza de miscare (tabul Caracter): mini-iconite cu sursele + ceasul de timer in tooltip */
.speed-icons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.speed-icon { position: relative; width: 30px; height: 30px; border: 2px solid #6b5232; border-radius: 5px; background: #1c140e; display: flex; align-items: center; justify-content: center; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5); cursor: help; }
.speed-icon.neg { border-color: #8a3a3a; }
.speed-icon img { width: 26px; height: 26px; }
.speed-icon .badge { position: absolute; bottom: -5px; right: -5px; font-size: 9px; font-weight: 700; color: #1a1208; background: #f0c040; border-radius: 4px; padding: 0 3px; text-shadow: none; }
.speed-icon.neg .badge { background: #e07a7a; color: #2a0a0a; }
.buff-clock { position: relative; width: 40px; height: 40px; margin: 6px auto 2px; }
.buff-clock svg { width: 40px; height: 40px; display: block; }
.buff-clock circle { fill: none; stroke-width: 4; }
.buff-clock .bg { stroke: #3c2a1e; }
.buff-clock .fg { stroke: #f0c040; stroke-dasharray: 100; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 20px 20px; }
.buff-clock .t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #f0e1cf; text-shadow: 0 1px 2px #000; }
@keyframes clockDeplete { to { stroke-dashoffset: 100; } }
/* Bara de buff-uri din HUD (sub bara de XP) */
#hud-buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; pointer-events: auto; }
.buff-icon { position: relative; width: 28px; height: 28px; border: 2px solid #6b5232; border-radius: 5px; background: #1c140e; display: flex; align-items: center; justify-content: center; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.6); cursor: help; }
.buff-icon.bad { border-color: #a04040; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.5), 0 0 6px rgba(200,60,60,0.4); }
.buff-icon img { width: 24px; height: 24px; }
.buff-icon .g { font-size: 15px; line-height: 1; }
.skill-row { border-bottom: 1px solid #2a2f3a; padding: 8px 0; }
.skill-row b { color: #e6c84a; }
.skill-row .desc { color: #8a8f9a; font-size: 12px; margin: 2px 0; }
.quest-row { border-bottom: 1px solid #2a2f3a; padding: 8px 0; }
.quest-row .desc { color: #8a8f9a; font-size: 12px; }
/* Card aerisit ca un slot mare de inventar: icon stanga + info dreapta, separator subtil intre rinduri. */
.shop-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px;
  background: rgba(20,14,8,.4); border: 1px solid #3c2a1e; border-radius: 6px;
  transition: border-color .12s, background .12s;
}
.shop-row:hover { border-color: #6b5232; background: rgba(40,28,16,.5); }
.shop-row .price { color: #e6c84a; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fullmap-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(4,8,12,0.72); display: flex; align-items: center; justify-content: center; }
.fullmap-box { background: #251c15; border: 3px solid #6b5232; border-radius: 6px; padding: 12px; box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0,0,0,.8); }
.fullmap-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 700; color: #f0c040; font-family: 'MedievalSharp', 'Cinzel', serif; }
.fullmap-head .x { cursor: pointer; color: #8a8f9a; position: relative; z-index: 3; pointer-events: auto;
  display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px;
  margin: -4px -4px -4px 0; border-radius: 5px; font-size: 18px; line-height: 1; }
.fullmap-head .x:hover { color: #ff7a6a; background: rgba(255,122,106,.14); }
.fullmap-canvas { display: block; width: 600px; max-width: 86vmin; height: auto; image-rendering: pixelated; border-radius: 6px; border: 2px solid #4a3826; }
.shop-buy { display: flex; gap: 6px; align-items: center; flex: 0 0 auto; }
.shop-buy .qty { width: 44px; padding: 4px 6px; font-size: 12px; text-align: center; background: #11141a; color: #e8eaed; border: 1px solid #2a2f3a; border-radius: 5px; }
/* input-ul de pret din randul de produs (owner) — vizibil, nu un text intins pe tot rindul */
.shop-buy .ss-price { width: 92px; flex: none; box-sizing: border-box; padding: 6px 8px; font-size: 13px; text-align: right; background: #11141a; color: #ffd24a; font-weight: 700; border: 1px solid #4a3826; border-radius: 5px; }
.shop-buy .ss-price:focus { border-color: #c8a04a; outline: none; background: #181208; }
.shop-buy button { flex: none; white-space: nowrap; padding: 5px 10px; font-size: 12px; }
/* numele + cantitatea — flex column ca sa stea curat sub iconita */
.shop-row > span:first-child { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; font-size: 13px; color: #e8dcc4; }
.shop-row > span:first-child .muted { font-size: 11px; }
.muted { color: #c0b090; } /* text secundar pe fundal maro/lemn — contrast decent (era #8a8f9a, gri-albastru, se pierdea) */
.good { color: #7ad07a; }
.bad { color: #e07a7a; }

#tooltip {
  position: absolute; background: #1c140e; border: 2px solid #6b5232; border-radius: 4px;
  padding: 8px 12px; font-size: 12px; pointer-events: none; z-index: 9999; max-width: 280px;
  box-shadow: 3px 3px 0 #120e0a; color: #e2d9cc;
}
#tooltip b { color: #f0c040; }
#tooltip .muted { font-size: 11px; color: #c9b895; } /* descriere item — mai luminoasa pt lizibilitate pe tooltip inchis */
#tooltip-compare {
  position: absolute; background: #1c140e; border: 2px solid #4a3d2a; border-radius: 4px;
  padding: 6px 12px 8px 12px; font-size: 12px; pointer-events: none; z-index: 9999; max-width: 280px;
  box-shadow: 3px 3px 0 #120e0a; color: #b5a898; opacity: 0.92;
}
#tooltip-compare b { color: #d2a840; }
#tooltip-compare .muted { font-size: 11px; color: #7a6a52; }
#tooltip-compare .tt-compare-h { font-size: 10px; color: #8a7a58; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px dashed #4a3d2a; }
.mobile #tooltip-compare { display: none !important; }

/* Pescuit: promptul "TRAGE!" la muscatura (click/tap sau F) */
#fish-prompt {
  position: fixed; left: 50%; top: 58%; transform: translate(-50%, -50%);
  z-index: 250; cursor: pointer; pointer-events: auto;
  animation: fishPulse 0.35s ease-in-out infinite alternate;
}
#fish-prompt .fish-prompt-inner {
  background: #251c15; border: 3px solid #e2b714; border-radius: 10px;
  padding: 12px 26px; font-size: 26px; font-weight: 900; color: #ffe27a;
  box-shadow: 4px 4px 0 #120e0a, 0 0 24px rgba(226, 183, 20, 0.55);
  text-shadow: 0 2px 0 #000;
}
#fish-prompt .fish-key {
  display: inline-block; background: #8c6239; border: 2px solid #3e281c; border-radius: 6px;
  padding: 1px 10px; margin-left: 8px; font-size: 20px; color: #fff; box-shadow: 2px 2px 0 #000;
}
@keyframes fishPulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.12); } }
/* 🎣 Prada RARĂ = fereastră fulger: prompt roșu, mai mare, tremură agresiv ca să te alertezi instant */
#fish-prompt.rare { animation: fishRare 0.11s linear infinite alternate; }
#fish-prompt.rare .fish-prompt-inner {
  border-color: #ff5a3c; color: #fff; font-size: 30px;
  background: #3a0e08; box-shadow: 4px 4px 0 #120302, 0 0 30px rgba(255,80,50,0.85);
}
@keyframes fishRare {
  from { transform: translate(-50%, -50%) scale(1.02) rotate(-2deg); }
  to   { transform: translate(calc(-50% + 4px), -50%) scale(1.16) rotate(2deg); }
}
/* 🎣 Minijoc pe runde (pesti legendari): puncte 1/3 · 2/3 · 3/3 deasupra prompt-ului */
#fish-prompt .fish-rounds { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 8px; }
#fish-prompt .fish-dot {
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 900; font-size: 14px; color: #6a5a3a;
  background: #1c130a; border: 2px solid #4a3826; box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
}
#fish-prompt .fish-dot.done { color: #0d0803; background: #6cd06c; border-color: #2e7a2e; }
#fish-prompt .fish-dot.now  { color: #fff; background: #ff5a3c; border-color: #ffb0a0; box-shadow: 0 0 12px rgba(255,80,50,.7); }
#fish-prompt .fish-rounds-lbl { margin-left: 5px; font-weight: 900; font-size: 15px; color: #ffe27a; text-shadow: 0 1px 2px #000; }

#inv-drag-ghost {
  position: fixed; left: 0; top: 0; pointer-events: none; z-index: 300;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: rgba(10,16,30,0.85); border: 1px solid rgba(230,200,74,0.6); border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,.7); opacity: 0.92;
  will-change: transform;
}
.inv-slot.drag-over { border-color: #e6c84a; background: rgba(230,200,74,0.12); }
.inv-slot.drag-src { opacity: 0.32; }
.inv-slot.drag-src .icimg, .inv-slot.drag-src .ic { filter: grayscale(0.5); }

/* ===== Ecran de moarte — redesign (vignette + craniu opac + panou distinct) ===== */
#death-overlay {
  position: absolute; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #4a1010 0%, #1a0808 45%, #0a0505 80%);
  animation: deathFadeIn .5s ease-out;
}
@keyframes deathFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.is-dead #mobile-host { display: none !important; }
#death-overlay .death-vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,.85);
}
#death-overlay .death-skull-bg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -48%);
  font-size: clamp(220px, 40vh, 340px); opacity: .06;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 24px rgba(200,50,50,.4));
}
#death-overlay .death-panel {
  position: relative; z-index: 2; text-align: center;
  padding: 30px 40px 26px; max-width: 420px; width: 90%;
  background: linear-gradient(180deg, rgba(58,24,20,.85), rgba(28,10,10,.9));
  border: 2px solid #7a2a20; border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,180,150,.08);
  animation: deathPanelIn .6s cubic-bezier(.2,.9,.3,1);
}
@keyframes deathPanelIn { from { transform: translateY(-20px) scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
#death-overlay .death-skull {
  font-size: 62px; margin-bottom: 4px; line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(200,50,50,.5)) drop-shadow(0 0 20px rgba(255,80,60,.25));
}
#death-overlay h2 {
  margin: 0 0 8px; font-size: 32px; font-weight: 400;
  color: #e0a2a2; letter-spacing: 4px; text-transform: uppercase;
  font-family: "MedievalSharp", "Cinzel", serif;
  text-shadow: 0 2px 8px #000, 0 0 20px rgba(200,50,50,.3);
}
#death-overlay #death-cause {
  margin: 0 0 22px; color: #cbb894; font-size: 13px; letter-spacing: .3px;
}
#death-overlay #death-cause b { color: #e5a2a2; }
#death-overlay .death-buttons { gap: 10px; justify-content: center; flex-wrap: wrap; }
#death-overlay .death-btn {
  padding: 10px 18px; font-size: 13px; letter-spacing: .3px;
  font-family: "MedievalSharp", "Cinzel", serif; cursor: pointer;
  border-radius: 5px; white-space: nowrap;
  background: #2a1c14; color: #cbb894; border: 1px solid #4a2a20;
  text-shadow: 0 1px 1px #000; box-shadow: 0 3px 0 #1a0e0a;
  transition: transform .05s;
}
#death-overlay .death-btn:hover { background: #3a2620; color: #e8dcc4; border-color: #6a3a2a; }
#death-overlay .death-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #1a0e0a; }
#death-overlay .death-btn-primary {
  background: linear-gradient(180deg, #c99a3a, #9a6f22);
  color: #2a1c08; border-color: #5a3f15; box-shadow: 0 3px 0 #4a3312;
  font-weight: 700;
}
#death-overlay .death-btn-primary:hover { background: linear-gradient(180deg, #d8a944, #a67d2a); }
#death-overlay .death-hint {
  margin-top: 22px; font-size: 11px; color: #8a7a63; letter-spacing: .3px;
}
#death-overlay .death-hint b { color: #ffd76a; font-variant-numeric: tabular-nums; }
.mobile #death-overlay .death-panel { padding: 26px 22px 22px; }
.mobile #death-overlay .death-skull { font-size: 54px; }
.mobile #death-overlay h2 { font-size: 26px; letter-spacing: 3px; }
.mobile #death-overlay .death-btn { min-height: 44px; padding: 10px 16px; font-size: 12.5px; }

/* ===== Skilluri — redesign A (class banner + filtre + listă) ===== */
.skills-win .win-body { min-width: 320px; max-width: 460px; }
.sk-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px; margin-bottom: 9px; border-radius: 7px;
  background: linear-gradient(135deg, #3a2a16, #26180c); border: 1px solid #6b5232;
}
.sk-banner .sb-emj {
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 26px;
  background: radial-gradient(circle at 40% 30%, #5c3a2a, #241612);
  border: 2px solid #6b5232; border-radius: 50%;
  box-shadow: 0 0 10px rgba(240,192,64,.15), inset 0 0 8px rgba(0,0,0,.5);
}
.sk-banner .sb-mid { min-width: 0; }
.sk-banner .sb-cls {
  color: #ffd76a; font-size: 15px; letter-spacing: .3px;
  font-family: "MedievalSharp", "Cinzel", serif; text-shadow: 0 1px 2px #000;
}
.sk-banner .sb-meta { font-size: 11px; margin-top: 2px; }
.sk-banner .sb-pts { text-align: center; min-width: 60px; }
.sk-banner .sb-pts-k { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: #8a7a63; }
.sk-banner .sb-pts-v {
  font-size: 24px; font-weight: 700; color: #6a5c4a;
  font-family: "MedievalSharp", "Cinzel", serif; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sk-banner .sb-pts-v.has {
  color: #3fbf3f; text-shadow: 0 0 8px rgba(63,191,63,.4);
  animation: skPulse 2s ease-in-out infinite;
}
@keyframes skPulse { 0%,100% { text-shadow: 0 0 8px rgba(63,191,63,.4);} 50% { text-shadow: 0 0 14px rgba(63,191,63,.7);} }

.sk-filters { display: flex; gap: 5px; margin-bottom: 8px; }
.sk-filter {
  flex: 1; padding: 6px 4px; font-size: 11.5px; cursor: pointer;
  background: #1a130c; color: #b8a582; border: 1px solid #3c2a1e; border-radius: 5px;
  font-family: inherit;
}
.sk-filter:hover { background: #241a10; color: #e8dcc4; }
.sk-filter.on {
  background: #33240f; color: #ffd76a; border-color: #6b5232;
  box-shadow: inset 0 0 0 1px rgba(255,215,120,.2);
}

.sk-util { display: flex; gap: 5px; margin-bottom: 6px; }
.sk-util-btn {
  flex: 1; padding: 4px 8px; font-size: 10.5px; cursor: pointer;
  background: #241a10; color: #8a7a63; border: 1px solid #3c2a1e; border-radius: 4px;
  font-family: inherit;
}
.sk-util-btn:hover { color: #ffd76a; background: #33240f; }
.sk-guide {
  font-size: 10.5px; line-height: 1.45; padding: 6px 8px; margin-bottom: 6px;
  border-left: 2px solid #6b5232; background: rgba(0,0,0,.2); border-radius: 0 4px 4px 0;
}
.sk-list { display: flex; flex-direction: column; gap: 6px; }

/* ===== Caracter — tab Statistici (hero banner + combat grid) ===== */
.hero-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center;
  padding: 10px 12px; margin-bottom: 10px; border-radius: 8px;
  background: linear-gradient(135deg, #3a2a16, #26180c); border: 1px solid #6b5232;
  box-shadow: 0 3px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,215,120,.05);
}
.hero-banner .hb-portrait {
  width: 76px; height: 76px; position: relative;
  background: radial-gradient(circle at 40% 30%, #5c3a2a, #241612);
  border: 2px solid #6b5232; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 14px rgba(240,192,64,.2), inset 0 0 12px rgba(0,0,0,.5);
}
.hero-banner .hb-emj { font-size: 38px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.hero-banner .hb-lv-ring {
  position: absolute; bottom: -4px; right: -4px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: linear-gradient(180deg, #c99a3a, #7a5416); border: 2px solid #281a0c; border-radius: 50%;
  font-size: 12px; font-weight: 700; color: #2a1c08; text-shadow: 0 1px 0 rgba(255,255,255,.15);
  font-variant-numeric: tabular-nums;
}
.hero-banner .hb-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hero-banner .hb-name {
  font-size: 17px; font-family: "MedievalSharp", "Cinzel", serif;
  letter-spacing: .3px; text-shadow: 0 1px 2px #000;
}
.hero-banner .hb-meta { font-size: 11px; }
.hero-banner .hb-rb { color: #c886ff; }
.hero-banner .hb-title {
  font-size: 11px; color: #ffd76a; padding: 2px 8px; align-self: flex-start;
  background: #2a1c08; border: 1px solid #6b5232; border-radius: 11px; margin-top: 2px;
}
.hero-banner .hb-bars { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.hero-banner .hb-bar {
  position: relative; height: 14px; background: #0d0906; border: 1px solid #2a1f12; border-radius: 3px; overflow: hidden;
}
.hero-banner .hb-fill { height: 100%; transition: width .3s ease; }
.hero-banner .hb-hp .hb-fill { background: linear-gradient(180deg, #e35a5a, #c94a4a); }
.hero-banner .hb-mp .hb-fill { background: linear-gradient(180deg, #5a8ae5, #4a7ac9); }
.hero-banner .hb-xp .hb-fill { background: linear-gradient(180deg, #e5c95a, #c9a94a); }
.hero-banner .hb-txt {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.85);
  font-variant-numeric: tabular-nums;
}

.combat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 9px;
}
.combat-cell {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 9px; background: #1a130c; border: 1px solid #2a1f12; border-radius: 5px;
}
.combat-cell .cc-k { font-size: 11px; color: #b8a582; letter-spacing: .2px; }
.combat-cell .cc-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.combat-cell .cc-v.cc-atk { color: #e07a5a; }
.combat-cell .cc-v.cc-def { color: #7ac9e0; }

.stat-pts-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; margin-bottom: 6px; border-radius: 5px;
  background: #1a130c; border: 1px solid #2a1f12;
  font-size: 12px; color: #b8a582;
}
.stat-pts-row b { color: #6a5c4a; font-size: 15px; font-variant-numeric: tabular-nums; }
.stat-pts-row.has {
  background: linear-gradient(180deg, #33240f, #241a10); border-color: #6b5232;
  color: #ffd76a;
}
.stat-pts-row.has b { color: #3fbf3f; text-shadow: 0 0 6px rgba(63,191,63,.4); }
/* ✦ Puncte de Renaștere: mov (culoarea Renașterii), diferit de punctele de status normale */
.stat-pts-row.reborn-pts.has { background: linear-gradient(180deg, #35205a, #24173a); border-color: #7a4fb0; color: #e0c8ff; }
.stat-pts-row.reborn-pts.has b { color: #c98bff; text-shadow: 0 0 6px rgba(201,139,255,.5); }
.reborn-stat-badge { color: #c98bff; font-size: 11px; font-weight: 700; margin-left: 4px; }
.reborn-alloc-btn { background: #4a2f6e !important; border-color: #7a4fb0 !important; color: #e0c8ff !important; }
.reborn-alloc-btn:hover { background: #5c3a88 !important; }
.mobile .hero-banner { grid-template-columns: 68px 1fr; padding: 8px 10px; }
.mobile .hero-banner .hb-portrait { width: 68px; height: 68px; }
.mobile .hero-banner .hb-emj { font-size: 32px; }
.mobile .combat-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
#death-cause { margin: 0 auto 14px; max-width: 320px; color: #e8c9a0; font-size: 14px; line-height: 1.35; }

/* Skill Panel (hold) */
#skill-panel {
  position: fixed; width: 270px; z-index: 9999; pointer-events: none;
  background: rgba(8, 16, 32, 0.97);
  border: 1px solid rgba(60, 120, 220, 0.55);
  border-radius: 10px; padding: 12px 14px; font-size: 12px;
  box-shadow: 0 0 0 1px rgba(60,120,220,0.12), 0 10px 32px rgba(0,0,0,.85);
}
.sp-header { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.sp-icon { width: 40px; height: 40px; border-radius: 7px; border: 1px solid rgba(60,120,220,0.4); flex-shrink: 0; }
.sp-title-group { flex: 1; }
.sp-name { font-size: 14px; font-weight: 700; color: #7ab8ff; letter-spacing: .4px; }
.sp-kind { font-size: 10px; color: rgba(255,255,255,.38); margin-top: 2px; }
.sp-lvl { font-size: 11px; color: rgba(255,255,255,.5); white-space: nowrap; }
.sp-lvl b { color: #e6c84a; }
.sp-desc { color: #c8cdd8; line-height: 1.5; border-top: 1px solid rgba(60,120,220,0.18); padding-top: 8px; margin-bottom: 8px; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.sp-next { font-size: 12px; color: #cdd6e2; margin: -3px 0 8px; font-weight: 700; }
.sp-next .good { color: #7ad07a; }
.sp-stat { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 4px; }
.sp-mp { background: rgba(50,80,200,.25); color: #88aaff; border: 1px solid rgba(50,80,200,.35); }
.sp-cd { background: rgba(180,120,30,.2); color: #e6c84a; border: 1px solid rgba(180,120,30,.3); }
.sp-rng { background: rgba(50,160,100,.2); color: #7adoa; border: 1px solid rgba(50,160,100,.3); color: #7ad07a; }
/* --- Popup bonus de set (hover in panoul Caracter), tema RPG jar --- */
.set-tip {
  position: fixed; z-index: 300; pointer-events: none; max-width: 320px;
  background: #231810;
  border: 1px solid rgba(216, 88, 56, 0.6);
  border-radius: 9px; padding: 10px 12px; font-size: 12px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.8);
}
.set-tip-head {
  font-size: 13px; font-weight: 700; color: #f0a040; letter-spacing: .3px;
  border-bottom: 1px solid rgba(216,88,56,.3); padding-bottom: 7px; margin-bottom: 7px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.set-tip-count { color: #e6c84a; font-size: 12px; }
.set-tip-tier { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; line-height: 1.4; }
.set-tip-tier + .set-tip-tier { border-top: 1px solid rgba(255,255,255,.06); }
.set-tip-pc { color: #c89868; font-weight: 700; white-space: nowrap; min-width: 56px; }
.set-tip-eff { flex: 1; }
.set-tip-chk { color: #6fcf6f; font-weight: 700; }
.set-tip-tier.on .set-tip-eff { color: #8fe08f; }
.set-tip-tier.off { opacity: .5; }
.set-tip-tier.off .set-tip-eff { color: #bdb2a6; }

/* --- Modal GM: lista jucatori online cu actiuni --- */
.gm-online-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.gm-online-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 8px; background: #1a130c; border: 1px solid #2a1f12; border-radius: 4px; }
.gm-online-row:hover { border-color: #6b5232; }
.gm-online-info { flex: 1; line-height: 1.3; font-size: 12px; min-width: 0; }
.gm-online-info b { color: #f0c040; }
.gm-tag { display: inline-block; padding: 1px 5px; font-size: 10px; font-weight: 700; background: #7a3aa8; color: #fff; border-radius: 3px; margin-left: 3px; }
.gm-online-actions { display: flex; gap: 4px; flex-wrap: wrap; flex: 0 0 auto; }
.gm-online-actions .rpg-btn.small { padding: 4px 8px; font-size: 11px; min-height: 0; }
.gm-online-actions .rpg-btn.danger { background: #943232; border-color: #e07060; color: #fff; }

/* --- Panou GM cu taburi --- */
.gm-panel-content { padding-top: 6px; min-width: 280px; }
.gm-panel-content input.qty { background: #11141a; color: #e8eaed; border: 1px solid #2a2f3a; border-radius: 4px; margin: 0 4px 4px 0; box-sizing: border-box; }
.gm-panel-content .rpg-btn { padding: 6px 10px; font-size: 12px; }
/* Teleport GM: harta (stanga) -> NPC (dreapta) */
.gm-tp-pick { display: grid; grid-template-columns: 190px 1fr; gap: 8px; margin-bottom: 6px; }
/* FARA scroll propriu: cu max-height aveam 3 zone de scroll imbricate (2 coloane + .win-body),
   rotita misca lista interioara ~49px si apoi se opreste => "nu merge scroll-ul". O singura bara, a ferestrei. */
.gm-tp-maps, .gm-tp-npcs { display: flex; flex-direction: column; gap: 3px; align-content: start; }
.gm-panel-content .gm-tp-map { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; padding: 5px 8px; }
.gm-panel-content .gm-tp-map.active { outline: 2px solid #f0c040; }
.gm-tp-mn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-tp-mc { flex: none; opacity: .65; font-size: 11px; }
.gm-tp-head { font-weight: bold; color: #f0c040; font-size: 12px; padding: 2px 0 4px; }
.gm-panel-content .gm-tp-b { text-align: left; padding: 5px 8px; }
.gm-panel-content .gm-sel { width: 100%; max-width: 100%; margin-bottom: 6px; padding: 6px 8px; background: #11141a; color: #e8eaed; border: 1px solid #2a2f3a; border-radius: 4px; }
.gm-panel-content .rpg-btn.danger { background: #943232; border-color: #e07060; color: #fff; }

/* --- Modal de confirmare stilizat (rpgConfirm) --- */
.rpg-confirm-overlay {
  position: fixed; inset: 0; z-index: 9000; /* mereu peste ferestre (winZTop creste pe masura ce deschizi) */
  background: rgba(0,0,0,.6); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.rpg-confirm-box { max-width: 380px; width: 100%; position: static !important; }
.rpg-confirm-msg { line-height: 1.55; margin-bottom: 4px; }
.rpg-confirm-actions { display: flex; gap: 10px; margin-top: 14px; }
.rpg-confirm-actions .rpg-btn { flex: 1; }
.rpg-confirm-actions .rpg-btn-primary { background: #6a3294; border-color: #b060e0; color: #fff; }

/* --- Upgraded Skill Interface Styles --- */

.skills-header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  background: #1c140e;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #3c2a1e;
}

.skill-card {
  background: #1e150f;
  border: 2px solid #3c2a1e;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,0.4);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

/* Class-specific glows/borders on hover */
.skill-card.cls-gardian { border-color: #5c3e26; }
.skill-card.cls-gardian:hover { border-color: #e08840; }
.skill-card.cls-corb { border-color: #44324f; }
.skill-card.cls-corb:hover { border-color: #9b7bd4; }
.skill-card.cls-mareea { border-color: #244b5c; }
.skill-card.cls-mareea:hover { border-color: #4fb8d6; }
.skill-card.cls-apicultor { border-color: #5c5024; }
.skill-card.cls-apicultor:hover { border-color: #e6c84a; }

.skill-icon-container {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  background: #0f0b07;
  border: 2px solid #3c2a1e;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.55);
  flex-shrink: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}
.skill-icon-container.locked {
  border-color: #251c15;
}
.skill-icon-container .skill-ic {
  width: 100%;
  height: 100%;
  border-radius: 2px;
}

/* Hotbar binding key badge in skills list */
.skill-key-badge {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #8c6239;
  color: #fff;
  border: 1.5px solid #3e281c;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 900;
  padding: 1px 4px;
  text-shadow: 0 1px 1px #000;
  box-shadow: 2px 2px 0 #000;
  z-index: 5;
}

.skill-card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.skill-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.5px;
}
.cls-gardian .skill-card-name { color: #f2a96b; }
.cls-corb .skill-card-name { color: #bca0f2; }
.cls-mareea .skill-card-name { color: #72dbf2; }
.cls-apicultor .skill-card-name { color: #f7d96a; }

.skill-dmg-info {
  font-size: 11px;
  color: #e2d9cc;
  margin-top: 1px;
}
.skill-dmg-info b {
  color: #f0c040;
}
.skill-dmg-info .cur-dmg {
  color: #fff;
  font-weight: 700;
}
.skill-dmg-info .dmg-arrow {
  color: #8a6a3e;
  margin: 0 2px;
}
.skill-dmg-info .next-dmg {
  color: #8f8;
  font-weight: 700;
}

.skill-card-meta {
  font-size: 11px;
  color: #9a8568;
  display: flex;
  gap: 8px;
  margin-top: 1px;
}
.skill-card-meta span {
  background: #1c140e;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #3c2a1e;
}

.skill-level-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 2px 0;
}
.skill-level-bar {
  flex: 1;
  height: 6px;
  background: #0f0b07;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  border: 1.5px solid #3c2a1e;
}
.skill-level-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cls-gardian .skill-level-fill { background: #e08840; }
.cls-corb .skill-level-fill { background: #9b7bd4; }
.cls-mareea .skill-level-fill { background: #4fb8d6; }
.cls-apicultor .skill-level-fill { background: #e6c84a; }

.skill-level-txt {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  min-width: 34px;
  text-align: center;
}
.cls-gardian .skill-level-txt { color: #ffb36a; background: #2a1a0f; border: 1px solid #5c3e26; }
.cls-corb .skill-level-txt { color: #cba5ff; background: #1a1024; border: 1px solid #44324f; }
.cls-mareea .skill-level-txt { color: #8eeaff; background: #0c1c24; border: 1px solid #244b5c; }
.cls-apicultor .skill-level-txt { color: #ffeb8a; background: #24200c; border: 1px solid #5c5024; }

.skill-milestones {
  margin-top: 5px;
  background: #150f0a;
  border-radius: 4px;
  padding: 5px 8px;
  border: 1px solid #2a1f14;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.milestone-item {
  font-size: 11px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 13px;
}
.milestone-icon {
  font-size: 10px;
  line-height: 13px;
  flex-shrink: 0;
}
.milestone-icon.achieved {
  color: #8f8;
}
.milestone-icon.locked {
  color: #6a5a44;
}
.milestone-text {
  flex: 1;
}
.milestone-text.achieved {
  color: #e2d9cc;
}
.milestone-text.locked {
  color: #6a5a44;
}

button.skill-btn {
  background: #8c6239;
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  border: 2px solid #3e281c;
  border-bottom: 4px solid #2a1b12;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  text-shadow: 0 1px 1px #000;
  text-transform: uppercase;
  align-self: flex-end;
  margin-top: 4px;
  transition: transform 0.05s, border-bottom-width 0.05s;
}
button.skill-btn:hover {
  background: #a17246;
}
button.skill-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

.cls-gardian button.skill-btn { background: #d06d20; border-color: #4a280c; border-bottom-color: #301a08; }
.cls-gardian button.skill-btn:hover { background: #e08840; }
.cls-corb button.skill-btn { background: #815fb5; border-color: #3b205e; border-bottom-color: #24143a; }
.cls-corb button.skill-btn:hover { background: #9b7bd4; }
.cls-mareea button.skill-btn { background: #2e9bb8; border-color: #0c4352; border-bottom-color: #082a33; }
.cls-mareea button.skill-btn:hover { background: #4fb8d6; }
.cls-apicultor button.skill-btn { background: #d0b020; border-color: #4a3e0c; border-bottom-color: #302808; }
.cls-apicultor button.skill-btn:hover { background: #e6c84a; }


/* ---- Social: meniu jucator, duel, schimb ---- */
.ctx-menu {
  position: fixed;
  z-index: 120;
  min-width: 150px;
  background: #251c15;
  border: 2px solid #6b5232;
  border-radius: 6px;
  padding: 6px;
  box-shadow: 5px 5px 0 #120e0a, 0 12px 30px rgba(0,0,0,0.7);
  /* fereastra mica: meniul poate fi mai inalt decat ecranul -> il facem derulabil ca sa nu iasa jos */
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}
.ctx-menu .ctx-name {
  font-weight: 700;
  color: #f0c040;
  background: #1c140e;
  font-size: 12px;
  padding: 4px 8px 6px;
  border-bottom: 2px solid #3c2a1e;
  margin-bottom: 6px;
  text-shadow: 0 1px 2px #000;
  text-align: center;
}
.ctx-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: #e2d9cc;
  padding: 7px 9px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.1s, color 0.1s;
}
.ctx-menu button:hover {
  background: #3e2d1f;
  color: #f0c040;
}

/* Context Submenu (Hover extend) */
.ctx-item-has-submenu {
  position: relative;
}
.ctx-submenu {
  display: none;
  /* Desktop: flyout portat in <body> cu position:fixed (left/top setate de JS) ca sa NU fie taiat de scroll-ul meniului principal */
  position: fixed;
  min-width: 160px;
  background: #1d160f;
  border: 1px solid #4a3826;
  border-radius: 6px;
  padding: 4px;
  z-index: 140;
  box-shadow: 4px 4px 12px rgba(0,0,0,.5);
}
.ctx-item-has-submenu:hover .ctx-submenu,
.ctx-submenu.show { /* touch: tap pe Duel extinde submeniul (fara hover) */
  display: block;
}
/* tinte mai mari pe mobil + submeniul sub item (nu lateral, ca sa incapa pe ecran) */
.mobile .ctx-menu { z-index: 145; min-width: 180px; }
.mobile .ctx-menu button { padding: 11px 12px; font-size: 15px; }
.mobile .ctx-submenu { position: static; margin: 4px 0 0 12px !important; box-shadow: none; border-color: #4a3826; }

/* RPG Low Poly Window and Buttons overrides */
.win.rpg-modal-win {
  background: #251c15 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 3px solid #6b5232 !important;
  border-radius: 6px !important;
  box-shadow: 5px 5px 0 #120e0a, 0 16px 40px rgba(0, 0, 0, 0.8) !important;
}
/* Modalele RPG folosesc ACELEASI valori ca .win-title/.win-body de mai sus — regulile astea existau doar
   ca sa le forteze cu !important. Le-am lasat fara !important: altfel `background:` cu !important ar
   reseta si background-image, iar textura de skin (--skin-title/--skin-body) n-ar aparea niciodata pe modale. */
.rpg-modal-win .win-title {
  background-color: #1c140e;
  border-bottom: 2px solid #3c2a1e;
  color: #f0c040;
  text-shadow: 0 1px 2px #000;
  padding: 8px 12px;
}
.rpg-modal-win .win-body {
  background-color: #251c15;
  color: #e2d9cc;
  padding: 12px;
}

/* RPG Bevel Buttons (Flat colors, simulated 3D bevel bottom border) */
.rpg-btn {
  background: #8c6239;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid #3e281c;
  border-bottom: 5px solid #2a1b12;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.05s, border-bottom-width 0.05s, background-color 0.1s;
}
.rpg-btn.btn-accept {
  background: #2e7d32;
  border-bottom: 5px solid #1b5e20;
}
.rpg-btn.btn-accept:hover {
  background: #388e3c;
}
.rpg-btn.btn-accept:active, .rpg-btn.btn-accept.on {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
.rpg-btn.btn-cancel {
  background: #c62828;
  border-bottom: 5px solid #8e0000;
}
.rpg-btn.btn-cancel:hover {
  background: #d32f2f;
}
.rpg-btn.btn-cancel:active {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
.rpg-btn.small-btn {
  padding: 4px 8px;
  font-size: 11px;
}
.rpg-btn:disabled, .rpg-btn.disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }

/* Magazin premium (DizCoins) */
.premium-btn .ic { filter: drop-shadow(0 0 4px rgba(90,209,255,.7)); }

/* Butonul Pet: indica starea (on/off) prin culoare + glow */
.menu-btn[data-win="pet"] .ic { filter: grayscale(0.6) opacity(0.7); transition: filter .15s; }
.menu-btn[data-win="pet"].pet-on .ic { filter: drop-shadow(0 0 5px rgba(120, 220, 130, .85)); }
.menu-btn[data-win="pet"].pet-on { background: #234c23; border-color: #5fae5f; }
.menu-btn[data-win="pet"].pet-on .lbl { color: #c8ffc8; }
.premium-shop-win .win-body { min-width: 320px; }
.premium-tabs {
  display: flex;
  gap: 6px;
  margin: 8px 0 12px;
}
.premium-tabs .inv-tab {
  flex: 1;
  font-family: "MedievalSharp", "Cinzel", serif;
  font-variant: small-caps;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  padding: 7px 0;
  background: linear-gradient(180deg, #33220f, #281a0c) !important;
  border: 1px solid #1a120b !important;
  border-radius: 3px !important;
  color: #b9a888 !important;
  box-shadow: inset 1px 1px 0 rgba(122,92,61,0.4) !important;
  transition: color 0.12s, border-color 0.12s;
  cursor: pointer;
}
.premium-tabs .inv-tab:hover {
  color: #e8dcc4 !important;
  border-color: #8c6a3e !important;
}
.premium-tabs .inv-tab.active {
  background: linear-gradient(180deg, #4e3824, #3a2818) !important;
  color: #f4d79a !important;
  border-color: #c9a35c !important;
  box-shadow: inset 1px 1px 0 #7a5c3d, 0 0 4px rgba(201, 163, 92, 0.2) !important;
}

.premium-balance {
  background: linear-gradient(180deg, #2a1f14, #1e140d) !important;
  border: 1px solid #4a3826 !important;
  border-radius: 4px !important;
  padding: 8px 16px !important;
  margin-bottom: 12px !important;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: "Cinzel", "MedievalSharp", serif !important;
  color: #b9a888 !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
.premium-balance b {
  color: #f4d79a !important;
  font-size: 14.5px !important;
  text-shadow: 0 1px 1px #000 !important;
}

.premium-row {
  background: rgba(30, 22, 14, 0.5) !important;
  border: 1.5px solid #4a3625 !important;
  border-radius: 4px !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s !important;
}
.premium-row:hover {
  background: rgba(45, 33, 21, 0.65) !important;
  border-color: #8c6a3e !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 8px rgba(201, 163, 92, 0.15) !important;
}
.premium-row .shop-ic {
  background: #1c120a !important;
  border: 1px solid #4b382a !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7) !important;
  border-radius: 3px !important;
  padding: 2px !important;
  width: 32px !important;
  height: 32px !important;
  margin-right: 8px !important;
}
.premium-row .premium-price {
  color: #f4d79a !important;
  font-family: "Cinzel", "MedievalSharp", serif !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  text-shadow: 0 1px 1px #000 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.premium-row .rpg-btn.btn-accept {
  background: linear-gradient(180deg, #388e3c, #2e7d32) !important;
  border: 1.5px solid #8e6844 !important;
  border-bottom: 4px solid #1b5e20 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  font-size: 11px !important;
  padding: 4px 10px !important;
  height: 28px !important;
}
.premium-row .rpg-btn.btn-accept:hover {
  background: linear-gradient(180deg, #43a047, #388e3c) !important;
}
.premium-row .rpg-btn.btn-accept:disabled {
  opacity: 0.45 !important;
  filter: grayscale(0.6) !important;
}

.premium-note {
  color: #8a8f9a;
  font-size: 11px;
  margin-top: 10px;
  text-align: center;
  font-style: italic;
}

/* Bursa DizCoins <-> DungeonCoins (pret global flotant) */
.market-panel {
  background: linear-gradient(180deg, #241a10, #191108);
  border: 1px solid #6b5232; border-radius: 6px;
  padding: 9px 10px; margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,215,120,.08), 0 2px 6px rgba(0,0,0,.35);
}
.market-panel .mk-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; text-align: center; }
.market-panel .mk-title { color: #f0c040; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-shadow: 0 1px 2px #000; }
.market-panel .mk-rate { color: #cbb894; font-size: 11.5px; }
.market-panel .mk-rate b { color: #ffe08a; }
.market-panel .mk-dirs { display: flex; gap: 6px; margin-bottom: 8px; }
.market-panel .mk-dir {
  flex: 1; padding: 6px 4px; font-size: 12px; cursor: pointer;
  background: #1a130c; color: #b8a582; border: 1px solid #3c2a1e; border-radius: 4px;
  font-family: inherit; transition: none;
}
.market-panel .mk-dir.active { background: #33240f; color: #ffd76a; border-color: #6b5232; box-shadow: inset 0 0 0 1px rgba(255,215,120,.2); }
.market-panel .mk-amt { display: flex; align-items: center; gap: 5px; margin-bottom: 9px; justify-content: center; }
.market-panel .mk-step, .market-panel .mk-quick {
  min-width: 30px; height: 30px; padding: 0 6px; cursor: pointer;
  background: #2a1f12; color: #e8dcc4; border: 1px solid #4a3625; border-radius: 4px;
  font-family: inherit; font-size: 14px; font-weight: 700;
}
.market-panel .mk-quick { font-size: 11px; opacity: .9; }
.market-panel .mk-step:active, .market-panel .mk-quick:active { background: #1a130c; }
.market-panel .mk-input {
  width: 62px; height: 30px; text-align: center; font-size: 14px; font-weight: 700;
  background: #0d0f11; color: #ffe08a; border: 1px solid #4a3625; border-radius: 4px; font-family: inherit;
}
.market-panel .mk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.market-panel .mk-total { color: #d8cbb0; font-size: 12.5px; flex: 1; }
.market-panel .mk-total b { color: #e8dcc4; }
.market-panel .mk-total .mk-cost { color: #ffd76a; }
.market-panel .mk-foot .rpg-btn { flex: 0 0 auto; }
.market-panel .mk-warn { text-align: right; font-size: 11px; margin-top: 5px; color: #e07a7a; }
.mobile .market-panel .mk-dir, .mobile .market-panel .mk-step, .mobile .market-panel .mk-quick, .mobile .market-panel .mk-input { min-height: 40px; }

/* Craft pergamente la Topitor */
.scroll-craft { margin-top: 12px; padding-top: 10px; border-top: 1px solid #3c2a1e; }
.scroll-craft .sc-head { color: var(--gold-soft, #ffd76a); font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.scroll-craft .sc-head .muted { font-weight: 400; }
.scroll-craft .sc-row { display: flex; align-items: center; gap: 9px; padding: 7px 8px; margin-bottom: 5px; background: #1a130c; border: 1px solid #2a1f12; border-radius: 6px; }
.scroll-craft .sc-row .icimg { width: 26px; height: 26px; flex: 0 0 auto; image-rendering: pixelated; }
.scroll-craft .sc-mid { flex: 1; min-width: 0; }
.scroll-craft .sc-nm { font-size: 12.5px; color: #e8dcc4; }
.scroll-craft .sc-ds { font-size: 10.5px; line-height: 1.35; }
.scroll-craft .sc-act { flex: 0 0 auto; }

/* Picker aplicare pergament */
.scroll-picker-overlay { position: fixed; inset: 0; z-index: 9200; background: rgba(0,0,0,.55); display: grid; place-items: center; padding: 16px; }
.scroll-picker-box { max-width: 420px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 14px; }
.scroll-picker-box .sp-title { color: #ffd76a; font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.scroll-picker-box .sp-sub { font-size: 12px; text-align: center; margin-bottom: 12px; }
.scroll-picker-box .sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.scroll-picker-box .sp-empty { grid-column: 1 / -1; text-align: center; padding: 18px 6px; }
.scroll-picker-box .sp-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 6px; background: #1a130c; border: 1px solid #4a3625; border-radius: 7px; cursor: pointer; font-family: inherit; }
.scroll-picker-box .sp-cell:hover { border-color: #8c6a3e; background: #241a10; }
.scroll-picker-box .sp-cell img { width: 38px; height: 38px; image-rendering: pixelated; }
.scroll-picker-box .sp-cell .sp-nm { font-size: 11.5px; color: #e8dcc4; text-align: center; line-height: 1.2; }
.scroll-picker-box .sp-cell .sp-bo { font-size: 10px; }
.scroll-picker-box .sp-cell.sp-full { opacity: .45; cursor: not-allowed; }
.scroll-picker-box .btn-cancel { display: block; margin: 0 auto; }
.mobile .scroll-picker-box .sp-grid { grid-template-columns: repeat(2, 1fr); }
.mobile .scroll-picker-box .sp-cell { min-height: 92px; }

/* ===== Loot — varianta B: listă cu raritate (dungă colorată la stânga) ===== */
.loot-win .win-body { min-width: 270px; max-width: 460px; }
.loot-head {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  margin-bottom: 10px; border-radius: 6px;
  background: linear-gradient(180deg, #3a2a16, #26180c); border: 1px solid #6b5232;
}
.loot-head .lh-emj { font-size: 28px; flex: 0 0 auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.loot-head .lh-txt { flex: 1; min-width: 0; }
.loot-head .lh-t1 { color: #ffd76a; font-size: 13.5px; letter-spacing: .3px; }
.loot-head .lh-t1 b { color: #f0c040; font-variant-numeric: tabular-nums; }
.loot-head .lh-t2 { font-size: 11px; margin-top: 1px; }
.loot-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.loot-list .lrow {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px 7px 8px;
  background: #1a130c; border: 1px solid #2a1f12; border-left: 4px solid #2a1f12;
  border-radius: 5px;
}
.loot-list .lrow.rar-common    { border-left-color: #d8d0c0; }
.loot-list .lrow.rar-uncommon  { border-left-color: #3fbf3f; }
.loot-list .lrow.rar-rare      { border-left-color: #4d9fff; }
.loot-list .lrow.rar-epic      { border-left-color: #b055e8; box-shadow: inset 0 0 0 1px rgba(176,85,232,.12); }
.loot-list .lrow.rar-legendary { border-left-color: #ff9022; box-shadow: inset 0 0 0 1px rgba(255,144,34,.18), 0 0 8px rgba(255,144,34,.14); }
.loot-list .lrow-yang { border-left-color: #e6c84a !important; }
.loot-list .lr-ic { width: 30px; height: 30px; flex: 0 0 auto; image-rendering: pixelated; text-align: center; font-size: 22px; line-height: 30px; }
.loot-list .lr-mid { flex: 1; min-width: 0; }
.loot-list .lr-nm { font-size: 12.5px; color: #e8dcc4; line-height: 1.25; }
.loot-list .lr-nm .lr-plus { color: #ffd76a; font-weight: 700; }
.loot-list .lr-nm .lr-rb { color: #c98bff; font-weight: 700; }
.loot-list .lr-rar { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; margin-top: 1px; color: #8a7a63; }
.loot-list .lr-rar.rar-t-common    { color: #b8b1a0; }
.loot-list .lr-rar.rar-t-uncommon  { color: #3fbf3f; }
.loot-list .lr-rar.rar-t-rare      { color: #4d9fff; }
.loot-list .lr-rar.rar-t-epic      { color: #b055e8; }
.loot-list .lr-rar.rar-t-legendary { color: #ff9022; text-shadow: 0 0 6px rgba(255,144,34,.35); font-weight: 700; }
.loot-take-all { width: 100%; padding: 9px; font-size: 13px; }
.mobile .loot-list .lrow { padding: 9px 10px 9px 9px; }
.mobile .loot-list .lr-ic { width: 34px; height: 34px; font-size: 24px; line-height: 34px; }
.mobile .loot-list .lr-mid { cursor: pointer; }

/* ===== Premium Shop — varianta A: Vitrină (grid de carduri) ===== */
.premium-shop-win .win-body { min-width: 260px; max-width: 480px; }
.pshop-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  margin-top: 4px;
  align-items: start; /* fara asta, un card cu descriere lunga intinde tot randul (ex. Black Ice Canister) */
}
.pshop-card {
  position: relative; padding: 9px 8px 8px; text-align: center;
  background: linear-gradient(180deg, #241a10, #1a130c);
  border: 2px solid #2a1f12; border-radius: 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: inset 0 1px 0 rgba(255,215,120,.05);
}
.pshop-card:hover { border-color: #6b5232; }
.pshop-card.rar-common    { border-color: #6b6a5a; }
.pshop-card.rar-uncommon  { border-color: #3fbf3f; box-shadow: inset 0 1px 0 rgba(63,191,63,.15), 0 0 6px rgba(63,191,63,.15); }
.pshop-card.rar-rare      { border-color: #4d9fff; box-shadow: inset 0 1px 0 rgba(77,159,255,.18), 0 0 6px rgba(77,159,255,.15); }
.pshop-card.rar-epic      { border-color: #b055e8; box-shadow: inset 0 1px 0 rgba(176,85,232,.18), 0 0 8px rgba(176,85,232,.18); }
.pshop-card.rar-legendary { border-color: #ff9022; box-shadow: inset 0 1px 0 rgba(255,144,34,.22), 0 0 10px rgba(255,144,34,.22); }
.pshop-card .pc-tag {
  position: absolute; top: 4px; right: 5px; font-size: 9px;
  color: #14100a; background: #f0c040; border-radius: 3px; padding: 1px 5px;
  letter-spacing: .4px; text-transform: uppercase; font-weight: 700;
}
.pshop-card .pc-ic { font-size: 30px; line-height: 1; height: 44px; display: grid; place-items: center; }
.pshop-card img.pc-ic { width: 44px; height: 44px; image-rendering: pixelated; }
.pshop-card .pc-nm {
  font-size: 12px; color: #e8dcc4; min-height: 30px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  line-height: 1.25; text-wrap: balance;
}
.pshop-card .pc-nm .pc-plus { color: #ffd76a; font-weight: 700; margin-left: 2px; }
.pshop-card .pc-pr { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pshop-card .pc-pr.dc { color: #5ad1ff; }
.pshop-card .pc-pr.dg { color: #ffb54a; }
.pshop-card .pc-btn { padding: 5px 10px; font-size: 11px; width: 100%; margin-top: 2px; }
.mobile .pshop-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
.mobile .pshop-card .pc-btn { min-height: 38px; }

/* ===== Craft vitrine (fierar/forge + nicovala portabila) — listă unitară cu raritate ===== */
.craft-bar {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 7px 10px; margin-bottom: 9px; border-radius: 6px;
  background: linear-gradient(180deg, #3a2a16, #1c130a); border: 1px solid #6b5232;
  font-size: 12px; color: #cbb894;
}
.craft-bar .cb-item b { color: #ffd76a; font-variant-numeric: tabular-nums; }
.craft-bar .cb-silver { color: #e6c84a; }
.craft-list { display: flex; flex-direction: column; gap: 6px; }
.craft-tabs { margin: 6px 0 8px; }
.craft-row {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; background: #1a130c; border: 1px solid #2a1f12; border-left: 4px solid #2a1f12; border-radius: 6px;
}
.craft-row.rar-common    { border-left-color: #d8d0c0; }
.craft-row.rar-uncommon  { border-left-color: #3fbf3f; }
.craft-row.rar-rare      { border-left-color: #4d9fff; }
.craft-row.rar-epic      { border-left-color: #b055e8; box-shadow: inset 0 0 0 1px rgba(176,85,232,.10); }
.craft-row.rar-legendary { border-left-color: #ff9022; box-shadow: inset 0 0 0 1px rgba(255,144,34,.14), 0 0 8px rgba(255,144,34,.10); }
.craft-row.locked { opacity: .55; }
.craft-row .cr-ic { width: 48px; height: 48px; display: grid; place-items: center; background: #0d0906; border: 1px solid #4a3625; border-radius: 5px; }
.craft-row .cr-ic img { width: 40px; height: 40px; image-rendering: pixelated; }
.craft-row .cr-mid { min-width: 0; }
.craft-row .cr-nm { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 13px; color: #e8dcc4; }
.craft-row .cr-nm b { color: #f0c040; }
.craft-row .cr-nm .cr-lv { font-size: 10.5px; }
.craft-row .cr-nm .cr-rar { font-size: 9.5px; letter-spacing: .5px; text-transform: uppercase; margin-left: 2px; }
.craft-row .cr-rar.rar-t-common    { color: #b8b1a0; }
.craft-row .cr-rar.rar-t-uncommon  { color: #3fbf3f; }
.craft-row .cr-rar.rar-t-rare      { color: #4d9fff; }
.craft-row .cr-rar.rar-t-epic      { color: #b055e8; }
.craft-row .cr-rar.rar-t-legendary { color: #ff9022; }
.craft-row .cr-mats { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.craft-row .cr-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 3px; font-size: 10.5px;
  background: rgba(0,0,0,.25); border: 1px solid transparent;
}
.craft-row .cr-chip .cc-ic { width: 14px; height: 14px; image-rendering: pixelated; }
.craft-row .cr-chip b { color: inherit; font-variant-numeric: tabular-nums; }
.craft-row .cr-chip.ok { color: #8fdf8f; border-color: rgba(143,223,143,.2); }
.craft-row .cr-chip.no { color: #e08a7a; border-color: rgba(224,138,122,.2); }
.craft-row .cr-chip.cr-silver.ok { color: #e6c84a; border-color: rgba(230,200,74,.25); }
.craft-row .cr-act { display: flex; flex-direction: column; gap: 4px; align-items: stretch; min-width: 96px; }
.craft-row .cr-btn { padding: 7px 12px; font-size: 11.5px; white-space: nowrap; }
.craft-row .cr-btn-magic {
  padding: 4px 10px; font-size: 10.5px; white-space: nowrap;
  background: linear-gradient(180deg, #c47a2a, #7a4310); color: #fff;
  border: 1px solid #4a2a0a; border-radius: 4px; box-shadow: 0 2px 0 #3a200a;
}
.craft-row .cr-btn-magic:disabled { opacity: .45; }
.mobile .craft-row { grid-template-columns: 42px 1fr; }
.mobile .craft-row .cr-ic { width: 42px; height: 42px; }
.mobile .craft-row .cr-ic img { width: 36px; height: 36px; }
.mobile .craft-row .cr-act { grid-column: 1 / -1; flex-direction: row; min-width: 0; }
.mobile .craft-row .cr-btn { flex: 1; min-height: 40px; }
.mobile .craft-row .cr-btn-magic { min-height: 36px; padding: 6px 12px; }

/* ===== Jurnal Misiuni (redesign) — carduri cu stare colorată ===== */
.quest-win .win-body { min-width: 300px; max-width: 520px; }
.quest-sec-h {
  font-size: 12px; letter-spacing: .5px; color: #ffd76a; text-transform: uppercase;
  margin: 8px 2px 5px; padding-bottom: 4px; border-bottom: 1px solid #3c2a1e;
}
.quest-sec-h:first-child { margin-top: 2px; }
.quest-list { display: flex; flex-direction: column; gap: 7px; }
.quest-list-npc { margin-top: 6px; }
.qcard {
  display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: stretch;
  padding: 9px 10px 9px 9px;
  background: linear-gradient(180deg, #241a10, #1a130c);
  border: 1px solid #2a1f12; border-left: 4px solid #6b5232;
  border-radius: 6px;
}
.qcard.qc-available { border-left-color: #f0c040; box-shadow: inset 0 0 0 1px rgba(240,192,64,.08); }
.qcard.qc-active    { border-left-color: #4d9fff; }
.qcard.qc-ready     { border-left-color: #3fbf3f; box-shadow: inset 0 0 0 1px rgba(63,191,63,.15), 0 0 10px rgba(63,191,63,.18); }
.qcard.qc-done      { border-left-color: #6a6055; opacity: .68; }
.qcard .qc-icon {
  display: grid; place-items: center; width: 48px; height: 48px; align-self: start;
  background: #0d0906; border: 1px solid #4a3625; border-radius: 5px; font-size: 24px;
}
.qcard.qc-ready .qc-icon { animation: qcReadyPulse 1.6s ease-in-out infinite; }
@keyframes qcReadyPulse { 0%,100% { box-shadow: 0 0 0 rgba(63,191,63,0);} 50% { box-shadow: 0 0 12px rgba(63,191,63,.5);} }
.qcard .qc-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.qcard .qc-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.qcard .qc-title { font-size: 13.5px; color: #ffd76a; font-weight: 700; letter-spacing: .3px; }
.qcard .qc-lv { font-size: 10px; padding: 1px 6px; background: #2a1c08; color: #cbb894; border-radius: 3px; letter-spacing: .3px; }
.qcard .qc-state { font-size: 10px; letter-spacing: .5px; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; margin-left: auto; }
.qcard.qc-available .qc-state { color: #14100a; background: #f0c040; }
.qcard.qc-active .qc-state    { color: #14100a; background: #4d9fff; }
.qcard.qc-ready .qc-state     { color: #14100a; background: #3fbf3f; }
.qcard.qc-done .qc-state      { color: #cbb894; background: #3a2a1a; }
.qcard .qc-desc { font-size: 11.5px; color: #b8a582; line-height: 1.4; }
.qcard .qc-prog {
  position: relative; height: 12px; background: #0d0906; border: 1px solid #2a1f12; border-radius: 3px; overflow: hidden;
}
.qcard .qc-fill { height: 100%; background: linear-gradient(180deg, #6bc86b, #3fbf3f); transition: width .3s ease; }
.qcard.qc-active .qc-fill { background: linear-gradient(180deg, #7ab8ff, #4d9fff); }
.qcard .qc-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.7); font-variant-numeric: tabular-nums; }
.qcard .qc-rewards { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.qcard .qc-rew-lbl { font-size: 10.5px; color: #8a7a63; letter-spacing: .3px; }
.qcard .qc-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 3px; font-size: 10.5px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,215,120,.15); color: #e8dcc4;
}
.qcard .qc-chip img { width: 14px; height: 14px; image-rendering: pixelated; }
.qcard .qc-chip.qc-xp { color: #b39aff; }
.qcard .qc-chip.qc-silver { color: #e6c84a; }
.qcard .qc-chip.qc-dc { color: #5ad1ff; }
.qcard .qc-act { display: flex; flex-direction: column; justify-content: center; gap: 4px; align-self: stretch; }
.qcard .qc-btn { padding: 8px 12px; font-size: 12px; white-space: nowrap; min-width: 92px; }
.qcard .qc-btn-ready { animation: qcReadyPulse 1.6s ease-in-out infinite; }

.q-empty { text-align: center; padding: 30px 12px; color: #8a7a63; }
.q-empty-emj { font-size: 44px; opacity: .5; margin-bottom: 8px; }
.q-empty-t1 { color: #ffd76a; font-size: 15px; letter-spacing: .5px; }
.q-empty-t2 { font-size: 12px; margin-top: 4px; }

.mobile .qcard { grid-template-columns: 42px 1fr; }
.mobile .qcard .qc-icon { width: 42px; height: 42px; font-size: 22px; }
.mobile .qcard .qc-act { grid-column: 1 / -1; flex-direction: row; }
.mobile .qcard .qc-btn { flex: 1; min-height: 40px; }

/* Magazine de jucator (player shops) */
/* min-width elastic: pe ecrane inguste (preview/mobil) nu mai forteaza 380px -> nu mai iese din ecran.
   400px pe desktop ca grid-ul auto-fill sa incapa 6 coloane de 56px ca inainte. */
.shop-win .win-body, .shop-setup-win .win-body { min-width: min(400px, 86vw); max-width: 460px; padding: 14px 16px; }
.shop-sub { font-size: 12px; margin-bottom: 10px; }
.shop-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.shop-sort { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; padding: 4px 2px; }
.shop-sort .shop-to { max-width: none; flex: 1; padding: 5px 8px; }
/* produsele scrolleaza intern -> butoanele owner-ului raman vizibile fara scroll pe fereastra */
.shop-items { max-height: 260px; overflow-y: auto; margin-bottom: 6px; padding-right: 4px; }
/* scroll subtil ca in inventar */
.shop-items::-webkit-scrollbar { width: 8px; }
.shop-items::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 4px; }
.shop-items::-webkit-scrollbar-thumb { background: #4a3826; border-radius: 4px; }
.shop-items::-webkit-scrollbar-thumb:hover { background: #6b5232; }
.shop-earn {
  margin-top: 12px; padding: 9px 11px; border-radius: 6px;
  background: rgba(60,40,16,.45); border: 1px solid #6b5232;
  font-size: 13px; color: #e6c84a; text-align: center;
}
.shop-actions { display: flex; gap: 8px; margin-top: 10px; }
.shop-actions .rpg-btn { flex: 1; padding: 8px 10px; font-size: 13px; }
.shop-add-toggle { width: 100%; margin-top: 10px; padding: 9px 10px; font-size: 13px; }

/* ---- Grid de sloturi in stil inventar (24 sloturi max) ---- */
.shop-grid {
  display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 4px;
  justify-content: center; margin-bottom: 6px;
}
.shop-slot {
  width: 56px; height: 64px; background: #0e0b08; border: 1px solid #33281a; border-radius: 4px;
  position: relative; cursor: default; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 4px; box-shadow: inset 0 1px 4px rgba(0,0,0,.85);
  transition: border-color .12s, transform .08s;
}
.shop-slot.filled { cursor: pointer; }
.shop-slot.filled:hover { border-color: #c8a04a; transform: translateY(-1px); }
.shop-slot .icimg { width: 38px; height: 38px; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.shop-slot .pl { position: absolute; top: 1px; left: 3px; font-size: 9px; color: #e6c84a; text-shadow: 0 1px 2px #000; font-weight: 700; pointer-events: none; }
.shop-slot .ct { position: absolute; top: 1px; right: 3px; font-size: 10px; color: #8fffa0; text-shadow: 0 1px 2px #000; font-weight: 700; pointer-events: none; }
/* Banda de pret jos: fundal auriu translucid, vizibila pe orice icon */
/* REDESIGN: placuta de pret ca o eticheta de alama sub slot (vitrina) */
.shop-slot-price {
  position: absolute; left: 1px; right: 1px; bottom: 1px; height: 17px; line-height: 17px;
  background: linear-gradient(180deg, rgba(58, 40, 14, 0.95), rgba(40, 27, 9, 0.95));
  border-radius: 0 0 2px 2px; color: #ffd24a; font-size: 10px; font-weight: 700; text-align: center;
  text-shadow: 0 1px 2px #000; border-top: 1px solid rgba(201, 163, 92, 0.55); pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.shop-slot-price::before { content: "🪙"; font-size: 8px; margin-right: 2px; }
.shop-empty { text-align: center; padding: 30px 10px; font-style: italic; }

/* ---- Wiki / Ghid in-game ---- */
.wiki-win { max-width: 96vw; } /* wiki mai lat decat fereastra standard */
.wiki-win .win-body { min-width: 680px; max-width: 820px; padding: 0; height: 86vh; max-height: 86vh; overflow: hidden; } /* corpul contine layout-ul; NU scrolleaza el (doar .wiki-content) */
.wiki-layout { display: flex; height: 86vh; max-height: 86vh; min-height: 0; }
.wiki-nav { flex: 0 0 170px; border-right: 2px solid #3c2a1e; background: #1c140e; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.wiki-tab { display: flex; align-items: center; gap: 7px; text-align: left; padding: 8px 9px; background: transparent; border: 1px solid transparent; border-radius: 5px; color: #c8b89a; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.wiki-tab:hover { background: rgba(60,40,16,.4); border-color: #4a3826; }
.wiki-tab.active { background: #332619; color: #e6c84a; border-color: #8a6a3e; font-weight: 700; }
.wiki-tab-ic { font-size: 15px; width: 18px; text-align: center; }
.wiki-content { flex: 1 1 auto; overflow-y: auto; padding: 12px 16px; color: #e2d9cc; font-size: 13px; line-height: 1.55; min-width: 0; min-height: 0; }
.wiki-h { color: #f0c040; font-family: 'MedievalSharp', 'Cinzel', serif; margin: 0 0 10px; font-size: 18px; border-bottom: 1px solid #3c2a1e; padding-bottom: 6px; }
.wiki-content h4 { color: #ffb02e; margin: 14px 0 5px; font-size: 14px; }
.wiki-content ul { margin: 4px 0 8px; padding-left: 20px; }
.wiki-content li { margin: 3px 0; }
.wiki-content p { margin: 6px 0; }
/* mobil: stack vertical (nav sus, scroll orizontal) */
.mobile .wiki-win .win-body { min-width: 0; max-width: none; }
.mobile .wiki-layout { flex-direction: column; max-height: 78vh; }
.mobile .wiki-nav { flex: 0 0 auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 2px solid #3c2a1e; }
.mobile .wiki-tab { flex: 0 0 auto; white-space: nowrap; }
.mobile .wiki-tab span:not(.wiki-tab-ic) { display: none; } /* doar iconite pe mobil ca sa incapa */
/* setup magazin: slot selectat = bordura verde + badge ✕ de scoatere */
.shop-setup-grid { max-height: 300px; overflow-y: auto; }
/* lot indivizibil: badge in coltul stanga-jos al slotului (dreapta-sus e ✕, stanga-sus e +N) */
.ss-bulk-badge { position: absolute; left: 1px; bottom: 1px; font-size: 11px; line-height: 1;
  text-shadow: 0 1px 2px #000; pointer-events: none; }
.rpg-prompt-check { display: flex; align-items: center; gap: 8px; margin: 9px 2px 0; cursor: pointer;
  font-size: 12.5px; color: #c9b48c; user-select: none; }
.rpg-prompt-check input { width: 15px; height: 15px; accent-color: #c8a04a; cursor: pointer; flex: 0 0 auto; }
.rpg-prompt-check:hover { color: #f0dcae; }
.ss-tabs { margin: 6px 0 0; }
.ss-tabs + .shop-setup-grid { border: 1px solid #1a120b; border-radius: 0 2px 2px 2px; }
.shop-slot.ss-picked { border-color: #6ad06a; box-shadow: inset 0 1px 4px rgba(0,0,0,.85), 0 0 7px rgba(106,208,106,.5); }
.shop-slot .ss-rm-badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; line-height: 15px; text-align: center; background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 3px #000; z-index: 5; }
.shop-slot .ss-rm-badge:hover { background: #e0533b; }

/* Mobil: fereastra ia toata latimea utila + sloturi mai mari pentru tap */
.mobile .shop-win .win-body { min-width: 0; max-width: none; padding: 12px; }
.mobile .shop-grid { grid-template-columns: repeat(5, 62px); gap: 5px; }
.mobile .shop-slot { width: 62px; height: 72px; padding-top: 5px; }
.mobile .shop-slot .icimg { width: 42px; height: 42px; }
.mobile .shop-slot-price { height: 19px; line-height: 19px; font-size: 11px; }
.mobile .shop-actions .rpg-btn { padding: 8px 12px; font-size: 13px; min-height: 36px; }
/* setup */
.shop-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.shop-name-input { flex: 1; padding: 5px 8px; font-size: 13px; background: #0f0b07; color: #e8e4d8; border: 2px solid #4a3826; border-radius: 4px; }
.shop-setup-list { max-height: 200px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 4px; }
.shop-setup-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px 0; border-bottom: 1px solid #2a2017; }
.ss-pick { display: flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; flex: 1 1 auto; min-width: 0; }
.ss-pick > span, .ss-pick { overflow: hidden; }
.ss-ic { width: 22px; height: 22px; flex: none; }
.ss-right { display: flex; gap: 4px; flex: 0 0 auto; }
/* specificitate ridicata ca sa batem regula globala `input:not([type=range]){width:100%}` (altfel se intind si dau scroll orizontal) */
.shop-setup-row .ss-count, .shop-setup-row .ss-price {
  width: 58px; flex: none; box-sizing: border-box; padding: 5px 4px; font-size: 12px; text-align: center;
  background: #11141a; color: #e8eaed; border: 1px solid #2a2f3a; border-radius: 4px;
}
.shop-setup-row .ss-price { color: #cdd6e2; }
.mobile .shop-setup-row .ss-count, .mobile .shop-setup-row .ss-price { width: 60px; padding: 8px 4px; font-size: 14px; }
/* pe mobil (ferestre inguste in side-by-side) randul se stivuieste: numele itemului pe linia lui (full width,
   mereu vizibil), cantitatea+pretul pe linia de jos. Altfel numele se taia cand fereastra e ingusta. */
.mobile .shop-setup-row { padding: 5px 0; flex-wrap: wrap; }
.mobile .shop-setup-row .ss-pick { flex: 1 1 100%; overflow: visible; }
.mobile .shop-setup-row .ss-right { margin-left: auto; }
/* lista "in magazin" (flux nou mobil: tap din inventar -> pret -> apare aici) */
.ss-inshop-head { font-family: 'MedievalSharp', 'Cinzel', serif; color: #e6c84a; font-size: 13px; margin: 6px 0 2px; }
.premium-cosm-head { font-family: 'MedievalSharp', 'Cinzel', serif; color: #e6c84a; font-size: 13px; margin: 12px 0 4px; border-top: 1px solid #3c2a1e; padding-top: 8px; }
.cosm-use { cursor: pointer; }
.ss-inshop-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.ss-inshop-row .ss-nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; cursor: pointer; }
.ss-inshop-row .ss-meta { margin-left: auto; color: #cdd6e2; font-size: 12px; white-space: nowrap; }
.ss-inshop-row .ss-rm { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center;
  background: #7a1d18; border: 1px solid #e0805a; border-radius: 6px; color: #fff; cursor: pointer; touch-action: manipulation; }
/* foaia de pret la adaugare in magazin: stats stanga (grid sheet-itemdetail), inputuri+buton dreapta */
.sheet-shopprice .mob-sheet-acts { width: 190px; gap: 9px; }
.sp-row { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: #e6d2a8; width: 100%; }
.sp-row input { width: 100%; padding: 8px; font-size: 15px; background: #11141a; color: #e8eaed; border: 1px solid #3a2d1e; border-radius: 6px; box-sizing: border-box; }
/* --- Shop pe mobil: mai aerisit, target-uri de atins mai mari --- */
.mobile .shop-win .win-body { min-width: min(90vw, 360px); max-width: 92vw; }
.mobile .shop-items { max-height: 46vh; }
/* scrollbar (slider) vizibil mereu cand sunt multe produse — iOS il ascunde altfel */
.mobile .shop-items, .mobile .shop-setup-list, .mobile .inv-body {
  scrollbar-width: thin; scrollbar-color: #b08a4a rgba(0,0,0,.3);
}
.mobile .shop-items::-webkit-scrollbar, .mobile .shop-setup-list::-webkit-scrollbar, .mobile .inv-body::-webkit-scrollbar {
  width: 9px; -webkit-appearance: none;
}
.mobile .shop-items::-webkit-scrollbar-thumb, .mobile .shop-setup-list::-webkit-scrollbar-thumb, .mobile .inv-body::-webkit-scrollbar-thumb {
  background: #b08a4a; border-radius: 5px; border: 2px solid rgba(0,0,0,.2);
}
.mobile .shop-items::-webkit-scrollbar-track, .mobile .shop-setup-list::-webkit-scrollbar-track, .mobile .inv-body::-webkit-scrollbar-track {
  background: rgba(0,0,0,.35); border-radius: 5px;
}
.mobile .shop-row {
  padding: 9px 4px; gap: 10px;
  border-bottom: 1px solid #2a2017;
}
.mobile .shop-row > span:first-child { font-size: 14px; line-height: 1.3; }
.mobile .shop-row .price { font-size: 13px; }
.mobile .shop-row .rpg-btn, .mobile .shop-row button { padding: 9px 14px; font-size: 13px; min-height: 40px; }
.mobile .shop-row .shop-ic, .mobile .shop-row .icimg { width: 28px; height: 28px; }
.mobile .shop-sort { font-size: 14px; margin-bottom: 8px; }
.mobile .shop-sort .shop-to { padding: 8px 6px; font-size: 14px; }
.mobile .shop-tabs .inv-tab { padding: 10px 8px; font-size: 14px; }
/* mesaje */
.shop-msglog { max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 4px; background: #1c140e; border: 1px solid #3c2a1e; border-radius: 4px; }
.shop-msg { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-radius: 4px; max-width: 88%; }
.shop-msg.in { background: #2a2017; align-self: flex-start; }
.shop-msg.out { background: #2e3a2a; align-self: flex-end; }
.shop-msg .msg-who { font-size: 10px; color: #c8a04a; font-weight: 700; }
.shop-msg .msg-text { font-size: 12px; color: #e2d9cc; word-break: break-word; }
.shop-compose { display: flex; gap: 5px; margin-top: 8px; }
.shop-msg-input { flex: 1; padding: 5px 8px; font-size: 12px; background: #0f0b07; color: #e8e4d8; border: 2px solid #4a3826; border-radius: 4px; }
.shop-to { padding: 4px; font-size: 11px; background: #11141a; color: #e8eaed; border: 1px solid #2a2f3a; border-radius: 4px; max-width: 90px; }

/* Invite Modal Layout */
.duel-invite-win, .trade-invite-win {
  max-width: 320px !important;
}
.rpg-invite-content {
  text-align: center;
  padding: 8px 4px;
  position: relative; /* ancora pt ornamentul de fundal */
}
.rpg-invite-content p {
  font-size: 13px;
  line-height: 1.5;
  color: #e2d9cc;
  margin: 10px 0;
}
.rpg-invite-content b {
  color: #f0c040;
}
.rpg-invite-content strong {
  color: #ff5555;
  text-shadow: 0 1px 1px #000;
}
/* REDESIGN arena: ornament urias estompat in fundal + inel de countdown in jurul iconitei */
.rpg-invite-bgorn {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 130px; opacity: 0.06; pointer-events: none; filter: grayscale(0.4);
}
.rpg-invite-ring { position: relative; width: 64px; height: 64px; margin: 0 auto 10px; }
.rpg-invite-ring svg { position: absolute; inset: 0; }
.rpg-invite-ring .rpg-invite-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0; animation: none;
}
@keyframes inviteRing { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 169.6; } } /* R=27 -> 2πR */
/* ---- Invitatie-arena FIDEL mockup: titlu in corp + sabii in fundal + nume sus + inel jos ---- */
.invite-arena-win > .win-title { display: none !important; } /* titlul e randat in corp (ca in mockup) */
.invite-arena-win .win-body { padding: 18px 16px 14px !important; }
.rpg-invite-content { text-align: center; padding: 0; position: relative; }
.inv-swords { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); width: 150px; height: 90px; opacity: 0.14; pointer-events: none; }
.inv-title { font-family: "MedievalSharp", "Cinzel", serif; font-variant: small-caps; letter-spacing: 2px; font-size: 19px; color: #f4d79a; text-shadow: 0 1px 0 #000; position: relative; }
.inv-divider { height: 1px; margin: 8px 14% 14px; background: linear-gradient(90deg, transparent, #c9a35c, transparent); }
.inv-lead { font-size: 13px; color: #b9a888; }
/* numele oponentului MARE (cu prefix reborn) — DEASUPRA inelului, ca in mockup */
.inv-opp { font-family: "MedievalSharp", "Cinzel", serif; font-size: 26px; color: #ffd9c9; text-shadow: 0 2px 0 #000, 0 0 14px rgba(255, 120, 80, 0.35); margin: 4px 0 2px; }
.inv-opp .io-rb { color: #c9a35c; font-size: 15px; }
.inv-opp-lv { font-size: 13px; color: #f4d79a; font-family: 'MedievalSharp', 'Cinzel', serif; margin-bottom: 12px; }
.inv-ctx { font-size: 12px; color: #ffd24a; margin: -8px 0 12px; }
.inv-ctx b { color: #ffe9a0; }
.inv-expiry { font-size: 10.5px; color: #b9a888; margin: 5px 0 14px; font-variant: small-caps; letter-spacing: 1px; }
/* secundele ramase in centrul inelului */
.rpg-invite-ring { margin: 0 auto; }
.rpg-invite-ring .ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #f4d79a; text-shadow: 0 1px 2px #000; font-variant-numeric: tabular-nums; }
/* butoane fidel mockup: Accepta = primar rosu-auriu; Declina = lemn secundar.
   Hover-ul seteaza EXPLICIT fundalul — altfel regulile vechi .btn-accept:hover (verde) / .btn-cancel:hover (rosu) castiga cascada. */
.rpg-invite-buttons .rpg-btn.btn-accept { background: linear-gradient(180deg, #7a2f22, #5a1f16); border-color: #c9a35c; color: #f4d79a; }
.rpg-invite-buttons .rpg-btn.btn-accept:hover { background: linear-gradient(180deg, #8c392a, #68251a); filter: brightness(1.08); }
.rpg-invite-buttons .rpg-btn.btn-cancel { background: linear-gradient(180deg, #4a3524, #3a2818); border-color: #3e281c; color: #cbb890; }
.rpg-invite-buttons .rpg-btn.btn-cancel:hover { background: linear-gradient(180deg, #55402c, #43301e); filter: brightness(1.08); }
.rpg-invite-icon {
  font-size: 42px;
  margin-bottom: 12px;
  animation: bounce-rpg 1s infinite alternate ease-in-out;
}
.rpg-invite-buttons {
  display: flex;
  gap: 12px;
  margin-top: 18px;
  justify-content: center;
}
.rpg-invite-buttons .rpg-btn {
  flex: 1;
}

@keyframes bounce-rpg {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* Duel Countdown Overlay */
.duel-countdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.duel-countdown-box {
  background: #1e110a;
  border: 4px solid #b71c1c;
  border-radius: 8px;
  padding: 26px;
  text-align: center;
  box-shadow: 8px 8px 0 #000, 0 16px 40px rgba(0, 0, 0, 0.9);
  max-width: 350px;
  width: 90%;
  transform: rotate(-1deg);
}
.duel-countdown-box.fight {
  border-color: #d32f2f;
  background: #2c0909;
}
.duel-countdown-title {
  font-size: 16px;
  font-weight: 800;
  color: #ff3d00;
  letter-spacing: 2px;
  text-shadow: 0 2px 4px #000;
  margin-bottom: 8px;
}
.duel-countdown-vs {
  font-size: 14px;
  color: #e2d9cc;
  margin-bottom: 16px;
}
.duel-countdown-vs b {
  color: #ffd700;
}
.duel-countdown-number {
  font-size: 78px;
  font-weight: 900;
  color: #ffeb3b;
  text-shadow: 0 4px 6px #000;
  margin-bottom: 12px;
  line-height: 1;
  animation: pop-number-rpg 0.6s ease-out;
}
.duel-countdown-tip {
  font-size: 12px;
  color: #9a8568;
  font-weight: 700;
}

@keyframes pop-number-rpg {
  0% { transform: scale(0.5); opacity: 0; }
  30% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); }
}

/* Duel Active Banner */
.duel-banner-rpg {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #3e0c0c;
  border: 3px solid #b71c1c;
  border-radius: 6px;
  padding: 8px 16px;
  color: #ffebee;
  font-size: 13px;
  font-weight: bold;
  box-shadow: 4px 4px 0 #000, 0 8px 24px rgba(0, 0, 0, 0.6);
  animation: banner-slide-rpg 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
}
.duel-banner-rpg b {
  color: #ff8a80;
}
.duel-banner-rpg span {
  display: inline-flex;
  align-items: center;
}

@keyframes banner-slide-rpg {
  0% { transform: translate(-50%, -100px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}

/* Trade Window Specific Layout */
.trade-window-win {
  min-width: 400px !important;
}
.trade-cols {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.trade-col {
  flex: 1;
  background: #150f0a;
  border: 2px solid #3c2a1e;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 170px;
}
.trade-h {
  width: 100%;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-align: center;
  color: #9a8568;
  padding-bottom: 6px;
  border-bottom: 2px solid #3c2a1e;
  margin-bottom: 8px;
}
.trade-h.good {
  color: #4caf50;
  text-shadow: 0 0 3px rgba(76,175,80,0.4);
}
.trade-h.muted {
  color: #9a8568;
}

/* 12-slots grid (4 columns x 3 rows) */
.trade-slots-grid {
  display: grid;
  grid-template-columns: repeat(4, 38px);
  grid-template-rows: repeat(3, 38px);
  gap: 4px;
  justify-content: center;
  margin: 6px 0;
}
.trade-grid-slot {
  width: 38px;
  height: 38px;
  background: #0e0b08;
  border: 2px solid #33281a;
  border-radius: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55);
}
.trade-grid-slot.occupied {
  border-color: #8a6a3e;
  background: #1c140e;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.trade-grid-slot.occupied:hover {
  border-color: #f0c040;
}
.trade-grid-slot img {
  width: 30px;
  height: 30px;
}
.trade-grid-slot .ct {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 10px;
  color: #8f8;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
}
.trade-grid-slot .pl {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 9px;
  color: #e6c84a;
  text-shadow: 0 1px 2px #000;
  font-weight: bold;
}

.trade-yang {
  margin-top: 8px;
  font-size: 11px;
  color: #e6c84a;
  font-weight: 700;
  text-shadow: 0 1px 2px #000;
}
.trade-yangrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 0;
}

.inv-slot.offered {
  outline: 2px solid #4caf50;
  outline-offset: -2px;
}
button.small.on {
  background: #1f6f3a;
  border-color: #5ad07a;
  color: #eaffea;
}

/* Saved Accounts List styling */
/* ---- Modal Loading (login / quick-login / reconectare) ---- */
#login-loading {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.72); backdrop-filter: blur(3px);
  font-family: 'MedievalSharp', 'Cinzel', serif; color: #f0e1cf;
}
#login-loading.hidden { display: none; }
#login-loading .ll-card {
  background: #18120e;
  border: 2px solid #6b5232; border-radius: 10px;
  padding: 24px 32px; min-width: 240px; text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.6), 0 0 0 1px rgba(217, 177, 74, 0.12) inset;
}
#login-loading .ll-spinner {
  width: 42px; height: 42px; margin: 0 auto 14px;
  border: 4px solid rgba(217, 177, 74, 0.18);
  border-top-color: #d9b14a; border-radius: 50%;
  animation: ll-spin 0.9s linear infinite;
}
@keyframes ll-spin { to { transform: rotate(360deg); } }
#login-loading .ll-text { font-size: 14px; font-weight: 600; color: #ffe6b8; letter-spacing: 0.2px; }
#login-loading .ll-sub { font-size: 11px; color: #9a8568; margin-top: 4px; }

.saved-account-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 6px 10px;
  transition: border-color 0.15s, background-color 0.15s;
}
.saved-account-row:hover {
  border-color: #e6c84a;
  background: rgba(255, 255, 255, 0.06);
}
.saved-account-btn {
  background: transparent;
  border: none;
  color: #e8e4d8;
  padding: 0;
  text-align: left;
  font-weight: bold;
  font-size: 0.9em;
  flex: 1;
  cursor: pointer;
}
.saved-account-del {
  background: transparent;
  color: #ff7a6a;
  border: none;
  font-size: 0.9em;
  cursor: pointer;
  padding: 2px 6px;
}
.saved-account-del:hover {
  color: #ff4a4a;
}



/* ---- Grupa (party) panel ---- */
#party-panel {
  position: static;        /* in fluxul #hud-top -> apare SUB bare/badge XP, nu le acopera */
  align-self: flex-start;
  margin-top: 4px;
  z-index: 90;
  width: 230px;
  background: #251c15;
  border: 3px solid #6b5232;
  border-radius: 6px;
  padding: 6px 8px;
  box-shadow: 5px 5px 0 #120e0a, 0 8px 22px rgba(0,0,0,0.6);
  font-size: 12px;
  pointer-events: auto;
}
#party-panel .party-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  color: #f0c040;
  padding: 2px 2px 4px;
  border-bottom: 2px solid #3c2a1e;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-family: 'MedievalSharp', 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 1px;
}
#party-panel .party-head button {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  background: #c62828;
  border: 1.5px solid #3e281c;
  border-bottom-width: 3.5px;
  border-bottom-color: #8e0000;
  color: #fff;
  border-radius: 3px;
  cursor: pointer;
  transition: transform 0.05s, border-bottom-width 0.05s;
}
#party-panel .party-head button:hover {
  background: #d32f2f;
}
#party-panel .party-head button:active {
  transform: translateY(1.5px);
  border-bottom-width: 2px;
}
#party-panel .party-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 6px 2px;
  border-bottom: 2px solid #3c2a1e;
}
#party-panel .party-row:last-child {
  border-bottom: 0;
}
#party-panel .party-row.me .party-name {
  color: #fff;
  text-shadow: 0 1px 1px #000;
}
#party-panel .party-name {
  font-weight: bold;
  font-size: 12px;
  color: #e2d9cc;
}
#party-panel .party-tp {
  float: right; margin-left: 6px; padding: 0 5px; line-height: 16px; height: 17px;
  background: #173247; border: 1px solid #4a86c0; border-radius: 4px;
  color: #cfeeff; font-size: 11px; cursor: pointer;
}
#party-panel .party-tp:hover { background: #1e425c; border-color: #7bc0ff; }
#party-panel .party-tp:active { transform: translateY(1px); }
.shop-demand-badge { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-size: 11px; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.shop-slot-price.hot { color: #ff9a5a; }

/* ---- Clan / Guild (🛡️) ---- */
.guild-win { width: 440px; }
.guild-win .win-body { max-height: 82vh; } /* frame mai inalt: incape lista + butonul Invita fara scroll */
.guild-win .guild-tab-body { min-height: 360px; }
.guild-head { margin-bottom: 6px; }
.guild-title { font-size: 15px; font-weight: 800; color: #e6c84a; }

/* Banner and crest styling */
.guild-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid #3c2a1e;
  padding: 10px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.gb-crest {
  width: 48px;
  height: 54px;
  flex-shrink: 0;
}
.gb-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.gb-name {
  font-family: "Cinzel", "MedievalSharp", serif;
  font-size: 16px;
  font-weight: 700;
  color: #f4d79a;
  text-shadow: 0 1px 2px #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-meta {
  font-size: 11.5px;
  color: #b9a888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gb-meta b {
  color: #e8dcc4;
}
.gb-xp {
  position: relative;
  height: 14px;
  background: #0f0b07;
  border: 1px solid #4a3625;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 2px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6);
}
.gb-xp .fill {
  height: 100%;
  background: linear-gradient(180deg, #d8a93a, #b08020);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.gb-xp .lbl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 1px 2px #000;
  pointer-events: none;
}

/* Parchment style for MOTD */
.guild-motd {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #c3b091 !important; /* Parchment background */
  border: 2px dashed #8c6a3e !important;
  border-radius: 4px !important;
  padding: 10px 14px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  color: #3e281c !important; /* Dark text */
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.15) !important;
}
.guild-motd .gm-label {
  color: #3e281c !important; /* Dark wood color */
  font-weight: 700 !important;
  font-family: "MedievalSharp", "Cinzel", serif !important;
  flex-shrink: 0;
}
.guild-motd .gm-text {
  flex: 1;
  color: #3e281c !important;
  font-family: "MedievalSharp", "Cinzel", Georgia, serif !important;
  line-height: 1.45 !important;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 96px;
  overflow-y: auto;
}
.guild-motd .rpg-btn {
  /* small edit button */
  flex-shrink: 0;
  background: linear-gradient(180deg, #4e3524, #3a2818) !important;
  border: 1px solid #1a120b !important;
  color: #f4d79a !important;
  padding: 2px 6px !important;
  font-size: 12px !important;
}

/* Roster member list */
.guild-win .fr-section {
  margin-top: 12px;
}
.guild-win .fr-head {
  font-family: "Cinzel", "MedievalSharp", serif;
  font-size: 13px;
  font-weight: 700;
  color: #f4d79a;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  border-bottom: 1.5px solid #3c2a1e;
  padding-bottom: 4px;
}
.guild-win .fr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent; /* transparent rows, not capsules */
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* horizontal separator */
  border-left: 3px solid transparent; /* default transparent left border */
  margin-bottom: 0; /* no spacing between rows */
  border-radius: 0;
  transition: background-color 0.12s, border-left-color 0.12s;
}
.guild-win .fr-row:hover {
  background: rgba(201, 163, 92, 0.08); /* light gold highlight background */
  border-left-color: #c9a35c; /* vertical gold left border highlight */
  border-bottom-color: rgba(201, 163, 92, 0.15);
}
.guild-win .fr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #555;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.guild-win .fr-row.on .fr-dot {
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66, inset 0 1px 1px #fff;
}
.guild-win .g-ric {
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  font-size: 14px;
}
.guild-win .fr-nm {
  flex: 1;
  font-family: "Outfit", "MedievalSharp", sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: #e2d4bf;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Leader's name gold color */
.guild-win .fr-nm.g-leader {
  color: #f4d79a !important;
  font-weight: 700;
}
.guild-win .g-role {
  width: 70px;
  text-align: right;
  flex-shrink: 0;
  font-size: 12px;
  color: #8a8578;
}
.guild-win .g-lv {
  width: 50px;
  text-align: right;
  flex-shrink: 0;
  font-size: 13px;
  color: #e2d4bf;
  font-family: "Cinzel", "MedievalSharp", serif;
}
.guild-win .fr-row.off .fr-nm {
  color: #7a7568;
}

.guild-foot { margin-top: 10px; border-top: 1px solid #3c2a1e; padding-top: 8px; }

/* Command bar and themed buttons */
.guild-cmdbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;         /* wrap pe rand nou daca nu incape (Top/Război/Donează/Retrage nu se mai taie) */
  row-gap: 6px;
  gap: 6px;
  background: rgba(0, 0, 0, 0.22);
  padding: 8px 12px;
  margin: 10px -12px 0;
  border-top: 1px solid #3c2a1e;
}
.guild-cmdbar .gf-spacer { display: none; } /* spacer-ul flex nu are sens la wrap; ascuns */
.guild-cmdbar .rpg-btn {
  width: auto;
  flex-shrink: 0;
  background: linear-gradient(180deg, #4e3524, #3a2818) !important;
  border: 2px solid #c9a35c !important;
  border-bottom: 5px solid #20130a !important;
  color: #f4d79a !important;
  font-family: "MedievalSharp", "Cinzel", serif !important;
  font-size: 12px !important;
  height: 32px !important;
  padding: 0 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}
.guild-cmdbar .rpg-btn:hover {
  background: linear-gradient(180deg, #5c422d, #44301e) !important;
}
.guild-cmdbar .rpg-btn:active {
  transform: translateY(3px) !important;
  border-bottom-width: 2px !important;
}
/* Red / Danger buttons styled like the OSRS/WoW red buttons */
.guild-cmdbar .rpg-btn.danger,
.guild-cmdbar .rpg-btn.rpg-btn-primary {
  background: linear-gradient(180deg, #7a2f22, #5a1f16) !important;
  border: 2px solid #c9a35c !important;
  border-bottom: 5px solid #3c130d !important;
  color: #f4d79a !important;
}
.guild-cmdbar .rpg-btn.danger:hover,
.guild-cmdbar .rpg-btn.rpg-btn-primary:hover {
  background: linear-gradient(180deg, #8c392a, #68251a) !important;
}

.gf-spacer { flex: 1; }
.gf-tip { font-size: 10.5px; text-align: right; line-height: 1.35; max-width: 62%; }

/* Guild TABS (înlocuiesc bara de comenzi jos) */
.guild-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin: 8px 0 6px 0; padding: 4px;
  background: rgba(0,0,0,0.28);
  border: 1px solid #4a2f1a; border-radius: 6px;
}
.guild-tab {
  flex: 1 1 auto; min-width: 70px;
  padding: 6px 10px; font: inherit; font-size: 12.5px;
  color: #e8d4a6; background: linear-gradient(180deg, #2b1d10, #1a1108);
  border: 1px solid #4a2f1a; border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.guild-tab:hover { background: linear-gradient(180deg, #3a2818, #221510); border-color: #6a4225; }
.guild-tab.active {
  background: linear-gradient(180deg, #7a1f18, #4a1610);
  border-color: #c9a35c; color: #fff2c9;
  box-shadow: inset 0 -2px 0 #c9a35c;
}
.guild-tab .gtb-b {
  display: inline-block; min-width: 16px; padding: 0 4px;
  background: #c9a35c; color: #1a1108; border-radius: 8px;
  font-size: 10.5px; font-weight: 700; line-height: 14px;
}
.guild-tab.active .gtb-b { background: #fff2c9; color: #4a1610; }

.guild-tab-body {
  display: flex; flex-direction: column; gap: 8px;
}
.guild-treasury-sum {
  padding: 8px 10px; text-align: center;
  background: rgba(201,163,92,0.08);
  border: 1px solid #4a2f1a; border-radius: 6px;
  font-size: 13px;
}
.guild-treasury-acts {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  padding: 4px 0;
}
.guild-treasury-acts .rpg-btn { flex: 1 1 120px; min-width: 100px; }
.guild-settings .rpg-btn.danger { flex-basis: 100%; }

/* Roster offline opacity */
.guild-win .fr-row.off .fr-nm, 
.guild-win .fr-row.off .g-ric, 
.guild-win .fr-row.off .g-role, 
.guild-win .fr-row.off .g-lv {
  opacity: .55;
}

.guild-create .gc-l { display: block; margin: 6px 0 2px; font-size: 12px; color: #bca080; }
.guild-create .rpg-input { width: 100%; box-sizing: border-box; background: #120d07; border: 1px solid #4a3826; border-radius: 4px; color: #e8dcc4; padding: 5px 8px; font-size: 13px; }
.guild-create .rpg-input:focus { outline: none; border-color: #c8a04a; }
.gc-pay { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.gc-pay-btn { flex: 1; min-width: 90px; }
.gc-pay-btn.sel { background: #332619; color: #e6c84a; border-color: #c8a04a; }
#party-panel .party-bar {
  position: relative;
  height: 13px;
  background: #0f0b07;
  border-radius: 0;
  overflow: hidden;
  border: 1px solid #3c2a1e;
}
#party-panel .party-mpbar, #party-panel .party-xpbar { height: 9px; }
#party-panel .party-fill {
  height: 100%;
  transition: width .25s;
}
#party-panel .party-hpfill { background: #2e7d32; }
#party-panel .party-mpfill { background: #2f6fb0; }
#party-panel .party-xpfill { background: #d8a93a; }
#party-panel .party-barnum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  color: #f0e6d2;
  text-shadow: 0 1px 1px #000, 0 0 2px #000;
  pointer-events: none;
}
#party-panel .party-mpbar .party-barnum, #party-panel .party-xpbar .party-barnum { font-size: 8px; }

/* Edit Mode styling for Keybind configuration */
.hot-slot.keybind-edit-mode {
  border-color: #c89f5c !important;
  box-shadow: 0 0 4px #c89f5c, inset 2px 2px 0 rgba(0,0,0,0.55);
}
.hot-slot.keybind-edit-mode:hover {
  border-color: #ffb02e !important;
}
.hot-slot.keybind-edit-mode.remapping {
  background: rgba(200, 150, 80, 0.25) !important;
  border-color: #ffb02e !important;
  box-shadow: 0 0 8px #ffb02e, inset 2px 2px 0 rgba(0,0,0,0.55);
}

/* ============================ CONTROALE MOBILE (touch, landscape) ============================ */
/* pe mobil ascundem hotbar-ul + bara de meniu desktop (le inlocuieste clusterul de actiune) */
.mobile #hotbar, .mobile #menu-bar, .mobile #hud-help, .mobile #auto-ind { display: none !important; }
.mobile #hud-ping { top: auto; bottom: 6px; right: 12px; }

/* overlay de control: prinde toate atingerile (joystick + tap pe lume); butoanele isi opresc propagarea */
#mobile-host {
  position: fixed; inset: 0; z-index: 40; touch-action: none; -webkit-user-select: none; user-select: none;
}
#mobile-host.hidden { display: none; }

/* joystick flotant (apare unde atingi in jumatatea stanga) */
.joy-base {
  position: fixed; width: 132px; height: 132px; margin-left: -66px; margin-top: -66px;
  border-radius: 50%; background: rgba(30, 22, 14, 0.55);
  border: 2px solid rgba(240,192,64,.45); box-shadow: 0 0 18px rgba(0,0,0,.5); pointer-events: none;
}
.joy-base.hidden { display: none; }
.joy-knob {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: #9a6f47;
  border: 2px solid #f0c040; box-shadow: 0 3px 8px rgba(0,0,0,.6);
}

/* cluster de actiune (dreapta-jos): butonul de atac e ancora, restul pozitionate absolut fata de el */
.act-cluster {
  position: fixed; right: calc(72px + env(safe-area-inset-right, 0px)); bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  width: 0; height: 0;
}
.act-btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #2a1f12; border: 2px solid #8a6a3e; color: #f0e1cf;
  box-shadow: 0 2px 6px rgba(0,0,0,.6), inset 1px 1px 0 rgba(255,255,255,.08);
  touch-action: none; -webkit-tap-highlight-color: transparent; overflow: visible;
}
.act-btn .ic { font-size: 22px; line-height: 1; }
.act-btn img { width: 70%; height: 70%; pointer-events: none; }
.act-btn .lv { position: absolute; bottom: -2px; right: -2px; font-size: 10px; font-weight: 700; color: #f0c040; text-shadow: 0 1px 2px #000; }
.act-btn .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: #fff; background: rgba(0,0,0,.62); border-radius: 50%; }
.act-btn .cd.hidden { display: none; }
.act-btn.press { transform: scale(.92); border-color: #f0c040; }
.act-btn.aiming { border-color: #5ad0ff; box-shadow: 0 0 14px #5ad0ff; }
.act-btn.oncd { filter: grayscale(.5) brightness(.8); }
/* butonul mare de auto-atac, centrat in ancora */
.act-attack {
  width: 92px; height: 92px; left: 0; top: 0; margin: -46px 0 0 -46px; /* centrat pe ancora ca skill/extra (pt repozitionare uniforma) */
  background: #983024;
  border: 3px solid #e0805a;
}
.act-attack .ic { font-size: 34px; }
.act-attack.on { border-color: #ffd24a; box-shadow: 0 0 18px #ffb02e, inset 0 0 12px rgba(255,176,46,.4); }
.act-attack.tool { border-color: #5ad0ff; box-shadow: 0 0 14px rgba(90,208,255,.5), inset 0 0 10px rgba(90,208,255,.25); } /* unealta echipata (pescuit/minerit) */
/* buton de interactiune (verde) — apare in zona safe peste atac; pozitia o copiaza din JS */
.act-interact {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: #268747; border: 3px solid #5ad07a;
}
.act-interact.hidden { display: none; }
.act-interact .ic { font-size: 34px; }
/* numele cu cine/ce interactionezi, deasupra butonului */
.act-interact .lbl {
  position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(20,14,8,.92); border: 1px solid #5ad07a; border-radius: 6px;
  padding: 3px 9px; font-size: 13px; font-weight: 700; color: #d8ffe0; pointer-events: none;
}
.act-interact .lbl:empty { display: none; }
/* in zona safe minimizam combat-ul: skilluri, atac, dash */
.mobile.safe-zone .act-skill, .mobile.safe-zone .act-attack, .mobile.safe-zone .act-dash { display: none; }
/* dar unealta (pescuit/minerit) merge si in zona safe (apa langa oras) -> pastram butonul vizibil */
.mobile.safe-zone .act-attack.tool { display: flex; }
/* butoanele de skill (in arc) */
.act-skill { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: #1c140e; border-color: #6b5232; }
/* dash + potiuni (jos sub atac) */
.act-extra { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.act-dash { left: 60px; top: 46px; border-color: #9b7bd4; }
.act-dash .ic { color: #c8b0ff; }
.act-pot { top: 78px; }
.pot-hp { left: -34px; border-color: #c0504a; } .pot-hp .ic { color: #ff8a7a; }
.pot-mp { left: 26px; border-color: #4a70c0; } .pot-mp .ic { color: #8ab0ff; }

/* bara de meniu sus (inventar/caracter/skilluri/...) cat timp hotbar-ul desktop e ascuns */
.mob-topbar {
  position: fixed; top: calc(6px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px;
}
.mob-menu-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: #2a1f12; border: 2px solid #6b5232; border-radius: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,.6); touch-action: none; -webkit-tap-highlight-color: transparent;
}
.mob-menu-btn.press { transform: scale(.9); border-color: #f0c040; }
/* bara de sus colapsabila: ☰ ramane, iconitele se ascund/desfasoara */
.mob-topbar-items { display: flex; gap: 6px; }
.mob-topbar-items.hidden { display: none; }
.mob-topbar-toggle { font-size: 22px; color: #f0c040; }

/* overlay "roteste telefonul" (cand e portrait) */
.rotate-overlay {
  position: fixed; inset: 0; z-index: 300; background: #0d0f12;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: 'MedievalSharp', 'Cinzel', serif; color: #f0c040; font-size: 22px; font-weight: 700; line-height: 1.6;
}
.rotate-overlay.hidden { display: none; }
.rotate-overlay { flex-direction: column; gap: 26px; }
.rotate-overlay .rot-inner span { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 13px; color: #8a8f9a; font-weight: 400; }
/* ghidul de instalare PWA de sub promptul de rotire (doar in browser, nu in aplicatia instalata) */
.pwa-hint {
  max-width: 320px; padding: 14px 18px; border: 2px solid #4a3826; background: #1c120c;
  font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 14px; font-weight: 400;
  color: #e2d9cc; line-height: 1.7;
}
.pwa-hint b { color: #f0c040; }
.pwa-hint .pwa-sub { display: block; margin-top: 6px; font-size: 12px; color: #8a8f9a; }
.pwa-btn {
  display: inline-block; margin: 8px 0 4px; padding: 9px 16px; cursor: pointer;
  background: #6b5232; color: #ffe9b0; border: 2px solid #8e6844; border-bottom-width: 4px;
  font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 14px; font-weight: 700;
}
.pwa-btn.hidden { display: none; }
/* Cele 2 butoane mari Android/iOS pe overlay-ul de portrait */
.pwa-plat-row { display: flex; gap: 12px; margin: 12px 0 6px; justify-content: center; }
.pwa-plat-btn {
  flex: 1; max-width: 140px; padding: 16px 8px; cursor: pointer;
  background: #6b5232; color: #ffe9b0; border: 2px solid #8e6844; border-bottom-width: 5px;
  font-family: 'MedievalSharp','Cinzel',serif; font-weight: 700; font-size: 30px; line-height: 1;
}
.pwa-plat-btn span { display: block; font-size: 15px; margin-top: 6px; letter-spacing: 1px; }
.pwa-plat-btn:active { transform: translateY(2px); border-bottom-width: 3px; }
/* Modal tutorial cu poze */
.pwa-tut-ov { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pwa-tut-card {
  width: 100%; max-width: 380px; background: #1c120c; border: 3px solid #8e6844;
  box-shadow: 0 0 0 3px #3c2718, 0 12px 40px rgba(0,0,0,0.8);
  color: #e2d9cc; font-family: 'MedievalSharp','Cinzel',serif; padding: 18px 16px 14px; position: relative;
  max-height: 90vh; overflow-y: auto;
}
.pwa-tut-x { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: #bca080; font-size: 22px; cursor: pointer; padding: 4px 8px; }
.pwa-tut-title { color: #f0c040; font-size: 17px; font-weight: 700; margin-bottom: 10px; text-align: center; }
.pwa-tut-img { display: block; width: 100%; max-height: 55vh; object-fit: contain; margin: 0 auto 10px; border: 2px solid #4a3826; background: #0d0f12; }
.pwa-tut-text { font-size: 14px; line-height: 1.6; margin-bottom: 12px; text-align: center; }
.pwa-tut-text b { color: #f0c040; }
.pwa-tut-nav { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.pwa-tut-btn {
  padding: 8px 12px; cursor: pointer; background: #6b5232; color: #ffe9b0;
  border: 2px solid #8e6844; border-bottom-width: 4px;
  font-family: 'MedievalSharp','Cinzel',serif; font-weight: 700; font-size: 13px;
}
.pwa-tut-btn[disabled] { opacity: 0.4; cursor: default; }
.pwa-tut-dots { display: inline-flex; gap: 5px; }
.pwa-tut-dots .d { width: 8px; height: 8px; border-radius: 50%; background: #4a3826; }
.pwa-tut-dots .d.on { background: #f0c040; }

/* pe mobil ferestrele (inventar etc.) raman deasupra controalelor */
/* #windows = container flex-row ancorat pe dreapta. O fereastra = foaie pe dreapta (jocul ramane vizibil stanga).
   Doua ferestre (ex. dialog NPC + inventar) = SIDE-BY-SIDE: se strang automat ca sa incapa amandoua. */
.mobile #windows {
  position: fixed; inset: 0; z-index: 121;
  display: flex; flex-direction: row; justify-content: flex-end; align-items: stretch;
  pointer-events: none; /* doar ferestrele prind input, nu zona goala dintre ele si joc */
}

/* ============================ GUI MOBIL (Faza 2: ferestre + inventar touch) ============================ */
/* Ferestrele devin copii flex (nu mai fixed/suprapuse): se aseaza una langa alta, se strang la nevoie. */
.mobile .win {
  position: static !important; left: auto !important; top: auto !important; right: auto !important;
  bottom: auto !important; transform: none !important;
  flex: 0 1 auto; min-width: 0; width: min(440px, 96vw); max-width: 96vw;
  height: 100dvh; max-height: 100dvh; border-radius: 14px 0 0 0; z-index: 121;
  pointer-events: auto;
  display: flex; flex-direction: column; /* corpul umple restul -> robust la bordura/titlu pe 2 randuri */
}
.mobile .win-title { flex: 0 0 auto; min-height: 50px; display: flex; align-items: center; font-size: 17px; cursor: default; }
.mobile .win-title .x {
  margin-left: auto; min-width: 46px; min-height: 46px;
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.mobile .win-body {
  flex: 1 1 auto; min-height: 0; height: auto; max-height: none !important; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
/* ---- Redesign vizibil pe MOBIL: plăcuță de titlu gravată + spine de alamă pe muchia andocată ---- */
/* muchia stângă (spre joc) = coamă de alamă cu cusătură întunecată -> senzație de "cotor de carte" */
.mobile .win.rpg-modal-win {
  border-left: 3px solid #8a6a3e !important;
  box-shadow: inset 5px 0 0 #120e0a, -7px 0 22px rgba(0,0,0,.65) !important;
}
/* titlul = plăcuță: fundal închis + linie de alamă groasă dedesubt + ornament ❖ + muchii de relief */
.mobile .rpg-modal-win .win-title {
  border-bottom: 3px solid #8a6a3e !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.05), inset 0 -1px 0 #120e0a;
  padding-left: 14px !important; letter-spacing: .4px;
}
.mobile .rpg-modal-win .win-title::before {
  content: "❖"; color: #c8a04a; margin-right: 9px; font-size: 15px; flex: 0 0 auto; text-shadow: 0 1px 2px #000;
}
/* rânduri/sloturi mai clar "scobite" pe touch (ecran mic -> relief mai apăsat ca să se vadă) */
.mobile .fr-row, .mobile .mail-row, .mobile .lb-row, .mobile .premium-row, .mobile .title-row, .mobile .daily-row {
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.04);
}

/* tinte touch mai mari pentru inventar/echipament/taburi */
.mobile .inv-grid { grid-template-columns: repeat(5, 52px); gap: 6px; }
/* NU lasa copiii lui inv-body sa se comprime: eq-doll are doar copii absoluti -> min-height ~0 ->
   s-ar strange la zero si eq-slot-urile ar cadea peste grid. flex-shrink:0 -> corpul deruleaza in schimb. */
.mobile .inv-body > * { flex-shrink: 0; }
.mobile .inv-slot { min-width: 50px; min-height: 50px; touch-action: manipulation; }
.mobile .eq-slot { touch-action: manipulation; } /* NU mari eq-slot: silueta e pozitionata fix la dimensiuni desktop */
/* paper-doll de echipament: micsorat pe mobil (fura mult spatiu). Scale uniform (slot-urile sunt px fix pe silueta)
   + margin-bottom negativ ca sa recuperam inaltimea eliberata -> grid-ul de inventar urca. */
.mobile .eq-doll { transform: scale(0.72); transform-origin: top center; margin-bottom: -55px; }
/* buton + popup echipament pe mobil */
.inv-eq-toggle { width: 100%; margin-bottom: 8px; }
.mobile .eqdoll-win { width: min(300px, 90vw); }
.eqdoll-win .win-body { padding: 12px; display: flex; justify-content: center; }
.eqdoll-win .eq-doll { transform: none; margin: 0; width: 240px; }
/* in modul "adauga produs la magazin" ascundem silueta de echipament (doar inventarul conteaza) */
.shop-add-mode .eq-doll { display: none; }
.rpg-prompt-input {
  width: 100%; box-sizing: border-box; margin: 10px 0 4px; padding: 10px 12px; font-size: 16px;
  text-align: center; background: #11141a; color: #ffd24a; font-weight: 700;
  border: 1px solid #4a3826; border-radius: 6px;
}
.rpg-prompt-input:focus { border-color: #c8a04a; outline: none; background: #181208; }
/* modal "rezultat evolutie": aliniat in dreapta ecranului (langa modalul de confirmare din centru) */
.evolve-result-overlay { justify-content: flex-end; }
.evolve-result-box { margin-right: 6vw; border-color: #c98bff; box-shadow: 5px 5px 0 #120e0a, 0 0 24px rgba(201,139,255,.45); animation: evolvePop .25s ease; }
.evolve-result-box .win-title { color: #d9b6ff; }
.evolve-result-stats { background: #0f0a06; border: 1px solid #4a3826; border-radius: 6px; padding: 10px 12px; font-size: 12px; line-height: 1.5; }

/* Preview echipament alt jucator (eq-doll read-only) */
.inspect-box { min-width: 280px; }
.inspect-grid { display: grid; grid-template-columns: repeat(4, 60px); gap: 6px; justify-content: center; padding: 4px 0; }
.inspect-slot {
  width: 60px; height: 60px; background: #0e0b08; border: 1px solid #33281a; border-radius: 4px;
  position: relative; display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.85);
}
.inspect-slot.filled { cursor: help; }
.inspect-slot.filled:hover { border-color: #c8a04a; }
.inspect-slot .icimg { width: 42px; height: 42px; }
.inspect-slot .pl { position: absolute; top: 1px; left: 3px; font-size: 10px; color: #e6c84a; font-weight: 700; text-shadow: 0 1px 2px #000; }
.inspect-slot .ct { position: absolute; bottom: 1px; right: 3px; font-size: 9px; font-weight: 700; text-shadow: 0 1px 2px #000; }
.inspect-empty { font-size: 9px; color: #5a5048; text-align: center; }
.mobile .inspect-grid { grid-template-columns: repeat(4, 64px); }
.mobile .inspect-slot { width: 64px; height: 64px; }
@keyframes evolvePop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mobile .evolve-result-overlay { justify-content: center; }
.mobile .evolve-result-box { margin-right: 0; }
/* mod "adauga produs": evidentiaza ca itemele din inventar sunt clickabile pentru vanzare */
.shop-add-mode .inv-slot:not(.orphan) { cursor: pointer; }
.shop-add-mode .inv-slot:not(.orphan):hover { border-color: #6ad06a; box-shadow: inset 0 1px 4px rgba(0,0,0,.85), 0 0 6px rgba(106,208,106,.5); }
.shop-add-mode #win-inv .win-title::after { content: " · adaugă la magazin"; color: #6ad06a; font-size: 11px; }
/* reforjare trezire: la fel, ascundem eq-doll (alegi tinta din inventar) */
.awaken-mode .eq-doll { display: none; }
/* in reforjare: evidentiaza itemele trezite, estompeaza restul (doar trezitele se pot alege) */
.inv-slot.aw-pick { box-shadow: inset 0 0 0 2px #f0c040, 0 0 10px rgba(240,192,64,.7); animation: awpulse 1.2s ease-in-out infinite; }
@keyframes awpulse { 0%,100% { box-shadow: inset 0 0 0 2px #f0c040, 0 0 6px rgba(240,192,64,.5); } 50% { box-shadow: inset 0 0 0 2px #ffe9a8, 0 0 14px rgba(240,192,64,.9); } }
.inv-slot.aw-off { opacity: 0.28; filter: grayscale(0.8); pointer-events: none; }
.inv-slot.smith-sel { box-shadow: inset 0 0 0 2px #5ad07a, 0 0 12px rgba(90,208,122,.8); }
/* preview fierar: stats acum -> dupa */
.smith-preview { background: rgba(0,0,0,.22); border: 1px solid #6b5232; border-radius: 8px; padding: 8px 10px; margin: 4px 0; display: flex; gap: 10px; align-items: stretch; }
.smith-info { flex: 1 1 auto; min-width: 0; }
.smith-stats-cur { font-size: 11px; margin-bottom: 4px; }
.smith-actions { flex: 0 0 64px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.smith-act-btn { padding: 6px 4px; font-size: 12px; line-height: 1.2; min-height: 0; width: 100%; }
.smith-act-btn:disabled { opacity: .45; }
.smith-item { font-family: 'MedievalSharp', 'Cinzel', serif; color: #e6c84a; font-size: 14px; margin-bottom: 6px; }
.smith-stat { font-size: 13px; color: #e8eaed; margin: 2px 0; }
.smith-arrow { color: #8a8f9a; margin: 0 2px; }
.smith-cost { font-size: 13px; margin-top: 4px; color: #cdd6e2; }
.smith-cost.bad { color: #ff6a5a; }
.smith-chance { font-size: 12.5px; margin-top: 4px; color: #cdd6e2; }
.smith-detail-box { margin: 0 0 6px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.28); border: 1px solid #6b5836; font-size: 13px; line-height: 1.5; }
.smith-mode { font-size: 12.5px; font-weight: 700; margin: 4px 0; padding: 5px 8px; border-radius: 6px; background: rgba(240,192,64,.15); border: 1px solid #b08a4a; color: #ffe9a8; }
.smith-mode.risky { background: rgba(200,50,40,.18); border-color: #c0504a; color: #ffb3aa; }
.awaken-win .win-body { min-width: 250px; max-width: 320px; }
.aw-item { font-family: 'MedievalSharp', 'Cinzel', serif; color: #f0c040; font-size: 15px; margin-bottom: 6px; }
.aw-cur { font-size: 13px; margin-bottom: 3px; }
.aw-desc { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
.aw-keep { font-size: 12px; color: #7ad07a; margin-bottom: 4px; }
.aw-new { margin-top: 10px; padding: 8px 10px; border: 1px solid #f0c040; border-radius: 8px; background: rgba(240,192,64,.1); }
.aw-new-h { color: #ffd24a; font-weight: 800; font-size: 12px; }
.aw-new-name { font-size: 15px; margin: 3px 0; }
.mobile .inv-slot:active, .mobile .eq-slot:active { border-color: #f0c040; }
.mobile .inv-tab { min-width: 44px; min-height: 40px; font-size: 15px; }
.mobile #tooltip { display: none !important; }     /* fara hover pe touch */
.mobile.sheet-open #mobile-host { pointer-events: none; } /* nu lansa skilluri prin foaie */

/* fundal care intuneca jocul cand o fereastra e deschisa; tap = inchide fereastra de sus */
#win-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 119; }

/* buton "Inchide tot" cand sunt mai multe ferestre deschise (mobil) */
#win-closeall {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 130;
  background: #7a1d18; border: 2px solid #e0805a; border-radius: 8px; color: #fff;
  padding: 8px 16px; font-size: 14px; font-weight: 700; min-height: 40px;
  display: flex; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.6); touch-action: manipulation;
}
#win-closeall:active { background: #9a2a22; }

/* foaia modala (detaliu item / picker de legare) — card maro centrat */
#mob-sheet {
  /* foaia de detalii (tap pe item) trebuie sa fie PESTE orice o deschide: inspect echipament (400),
     drop/split (402), npctut (403). Altfel detaliile apar sub modal. */
  position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mob-sheet-panel {
  width: min(440px, 94vw); max-height: 86dvh; display: flex; flex-direction: column; overflow: hidden;
  background: #241a0f; border: 2px solid #8a6a3e; border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.7); color: #f0e1cf;
}
.mob-sheet-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #3c2a1e; font-family: 'MedievalSharp', 'Cinzel', serif; }
.mob-sheet-head .ic { width: 34px; height: 34px; image-rendering: pixelated; }
.mob-sheet-head .nm { flex: 1; font-size: 16px; color: #f0c040; line-height: 1.2; }
.mob-sheet-head .x { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; }
.mob-sheet-body { padding: 12px; overflow-y: auto; font-size: 14px; line-height: 1.55; -webkit-overflow-scrolling: touch; }
.mob-sheet-acts { padding: 10px 12px; border-top: 1px solid #3c2a1e; display: flex; flex-direction: column; gap: 8px; }
.mob-act { width: 100%; min-height: 46px; font-size: 15px; }
.mob-act.good { border-color: #e0b34a; color: #ffe9b0; }

/* Foaia de detaliu item: butoanele NU mai stau jos (acopereau stat-urile) -> head sus pe toata latimea,
   detaliile stanga (citibile complet, deruleaza), butoanele intr-o coloana compacta pe dreapta. */
.mob-sheet-panel.sheet-itemdetail {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "head head" "body acts";
  grid-template-rows: auto minmax(0, 1fr); /* rand body/acts = restul inaltimii -> body deruleaza, nu se taie */
  width: min(640px, 96vw); max-width: 96vw;
}
.sheet-itemdetail .mob-sheet-head { grid-area: head; }
.sheet-itemdetail .mob-sheet-body { grid-area: body; min-width: 0; min-height: 0; overflow-y: auto; }
.sheet-itemdetail .mob-sheet-acts { overflow-y: auto; }
.sheet-itemdetail .mob-sheet-acts {
  grid-area: acts; border-top: none; border-left: 1px solid #3c2a1e;
  width: 150px; justify-content: center; gap: 7px;
}
.sheet-itemdetail .mob-act { min-height: 38px; font-size: 13px; padding: 0 6px; }
.mob-buy-price { text-align: center; color: #e6c84a; font-weight: 700; font-size: 14px; margin-bottom: 2px; }
/* scrollbar vizibil si pe corpul foii de detaliu (stats lungi) */
.mob-sheet-body { scrollbar-width: thin; scrollbar-color: #b08a4a rgba(0,0,0,.3); }
.mob-sheet-body::-webkit-scrollbar { width: 9px; -webkit-appearance: none; }
.mob-sheet-body::-webkit-scrollbar-thumb { background: #b08a4a; border-radius: 5px; border: 2px solid rgba(0,0,0,.2); }
.mob-sheet-body::-webkit-scrollbar-track { background: rgba(0,0,0,.35); border-radius: 5px; }

/* picker: cele 9 sloturi ale clusterului */
.mob-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.pick-slot {
  position: relative; min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: #1c140e; border: 2px solid #6b5232; border-radius: 8px;
}
.pick-slot:active { border-color: #f0c040; transform: scale(.96); }
.pick-slot .key { font-size: 11px; color: #bca080; }
.pick-slot .bi { width: 30px; height: 30px; image-rendering: pixelated; }
.pick-slot .bg { font-size: 16px; font-weight: 700; color: #f0c040; }
.pick-slot .clr {
  position: absolute; top: -7px; right: -7px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: #7a1d18; border: 1px solid #e0805a; border-radius: 50%; font-size: 12px; color: #fff;
}

/* mod mutare: banner + evidentiere sloturi destinatie */
#mob-move-banner {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 130;
  background: #241a0f; border: 2px solid #f0c040; border-radius: 8px; padding: 8px 14px;
  font-size: 14px; color: #f0e1cf; display: flex; align-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
#mob-move-banner .cancel { color: #ff8a7a; text-decoration: underline; padding: 4px 6px; }
.mobile.move-mode .inv-slot { box-shadow: inset 0 0 0 2px rgba(240,192,64,.7); }

/* harta intreaga pe mobil: incape pe ecran (landscape) si butonul X ramane sus, mare si tappabil */
.mobile .fullmap-box { padding: 8px; max-width: 96vw; max-height: 94dvh; display: flex; flex-direction: column; }
.mobile .fullmap-head { flex: 0 0 auto; min-height: 42px; margin-bottom: 4px; }
.mobile .fullmap-head .x { min-width: 46px; min-height: 46px; display: flex; align-items: center; justify-content: center; font-size: 24px; padding: 0; }
/* lasa loc pentru head (46px) + padding/bordura in cutia de 94dvh, ca X-ul sa NU fie taiat sus */
.mobile .fullmap-canvas { width: auto; max-width: 100%; max-height: calc(94dvh - 72px); height: auto; }

/* ===== Faza 3: chat touch + HUD scalat + haptics ===== */
/* bar de chat (deasupra tastaturii virtuale; pozitia bottom o seteaza JS via visualViewport) */
#mob-chat-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: flex; gap: 6px; padding: 8px; background: rgba(20,14,8,.94); border-top: 2px solid #6b5232;
}
#mob-chat-input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 12px; font-size: 16px; /* 16px: evita zoom-ul iOS la focus */
  background: #160f08; border: 2px solid #8a6a3e; border-radius: 8px; color: #f0e1cf;
}
#mob-chat-send, #mob-chat-close {
  flex: 0 0 auto; width: 50px; height: 46px; font-size: 18px; border-radius: 8px;
  background: #2a1f12; border: 2px solid #8a6a3e; color: #f0e1cf;
}
#mob-chat-send { color: #ffd24a; }
.mobile.chat-open #mobile-host { pointer-events: none; } /* nu casta prin bara de chat */

/* HUD scalat pentru lizibilitate pe telefon */
.mobile #hud-top { width: 210px; gap: 5px; }
.mobile #hud-name { font-size: 16px; }
.mobile #hud-zone { font-size: 19px; padding: 4px 11px; }
.mobile #hud-yang, .mobile #hud-dc { font-size: 14px; }
.mobile #hud-dc { top: 34px; }
.mobile #hud-top .bar { height: 20px; }
.mobile #hud-top .bar.xp { height: 16px; }
.mobile #hud-top .bar span { font-size: 13px; line-height: 16px; }
.mobile #hud-top .bar.xp span { font-size: 11px; line-height: 12px; }
/* chatul mai lizibil; ingust ca sa nu acopere joystick-ul din stanga-jos */
.mobile #chat { width: min(46vw, 320px); }
.mobile #chat-lines { font-size: calc(13px * var(--chat-scale, 1)); max-height: 92px; }
/* bannerul tintei coboara sub bara de meniu (sus-centru), sa nu se suprapuna */
.mobile #hud-target { top: calc(56px + env(safe-area-inset-top, 0px)); }

/* ===== Faza 4: editor de repozitionare controale ===== */
.mob-drag-handle {
  position: fixed; width: 70px; height: 70px; z-index: 60; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px dashed #f0c040; background: rgba(240,192,64,.16); color: #f0c040; font-size: 26px;
}
.mob-drag-handle.hidden { display: none; }
.mob-edit-banner {
  position: fixed; top: calc(56px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 61;
  display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: #241a0f; border: 2px solid #f0c040; border-radius: 8px; font-size: 14px; color: #f0e1cf; box-shadow: 0 4px 14px rgba(0,0,0,.6);
}
.mob-edit-banner.hidden { display: none; }
.mob-edit-banner .reset, .mob-edit-banner .done { padding: 6px 12px; border-radius: 6px; border: 1px solid #8a6a3e; }
.mob-edit-banner .reset { color: #ff8a7a; }
.mob-edit-banner .export { padding: 6px 12px; border-radius: 6px; border: 1px solid #8a6a3e; color: #8fd0ff; }
.mob-edit-banner .done { color: #ffd24a; background: #2a1f12; }
.mob-export { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(90vw, 460px); height: 90px; z-index: 250; background: #160f08; color: #e8e4d8; border: 2px solid #8a6a3e; border-radius: 8px; font-size: 12px; padding: 8px; display: none; }
/* in mod editare: fiecare buton se MUTA (nu casteaza); evidentiaza-le, dezactiveaza joystick/topbar */
.mobile.layout-edit .joy-base, .mobile.layout-edit .mob-topbar { opacity: .25; }
.mobile.layout-edit .mob-topbar { pointer-events: none; }
.mobile.layout-edit .act-btn { outline: 2px dashed #f0c040; outline-offset: 2px; }
.mobile.layout-edit .act-btn.moving { outline-color: #5ad0ff; box-shadow: 0 0 16px #5ad0ff; }
/* marime reglabila a butoanelor de actiune (--act-scale, din sliderul de editare) */
.act-cluster { --act-scale: 1; }
.mobile .act-attack, .mobile .act-interact { width: calc(92px * var(--act-scale)); height: calc(92px * var(--act-scale)); margin: calc(-46px * var(--act-scale)) 0 0 calc(-46px * var(--act-scale)); }
.mobile .act-skill { width: calc(60px * var(--act-scale)); height: calc(60px * var(--act-scale)); margin: calc(-30px * var(--act-scale)) 0 0 calc(-30px * var(--act-scale)); }
.mobile .act-extra { width: calc(52px * var(--act-scale)); height: calc(52px * var(--act-scale)); margin: calc(-26px * var(--act-scale)) 0 0 calc(-26px * var(--act-scale)); }
.mobile .act-btn .ic { font-size: calc(22px * var(--act-scale)); }
.mobile .act-attack .ic, .mobile .act-interact .ic { font-size: calc(34px * var(--act-scale)); }
.mob-edit-banner .size { width: 88px; vertical-align: middle; } .mob-edit-banner .ml { color: #bca080; }

/* Wizard de creare caracter (pas cu pas) */
.wiz-dots { display: flex; justify-content: center; gap: 8px; margin: 2px 0 14px; }
.wiz-dot { width: 9px; height: 9px; border-radius: 50%; background: #3c2a1e; border: 1px solid #6b5232; transition: background .2s; }
.wiz-dot.active { background: #f0c040; border-color: #f0c040; }
.wiz-step { display: flex; flex-direction: column; gap: 10px; }
.wiz-step.hidden { display: none; }
.wiz-step h3 { text-align: center; }
.wiz-nav { display: flex; gap: 8px; } .wiz-nav button { flex: 1; }
.wiz-next { width: 100%; }
.wiz-sum { text-align: center; padding: 12px; background: #1c140e; border: 1px solid #3c2a1e; border-radius: 6px; font-size: 16px; }
.wiz-sum .muted { font-size: 12px; margin-top: 4px; }

/* ---------- Mobil: ecrane login + selectie personaj (landscape scurt) ---------- */
/* Pe telefon panourile pot fi mai inalte decat viewportul landscape -> facem ecranul derulabil
   si panoul sa incapa cu scroll intern. Inputurile la 16px ca iOS sa NU faca zoom la focus. */
.mobile #screen-auth, .mobile #screen-chars {
  align-items: flex-start; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px;
}
.mobile .auth-panel, .mobile .chars-panel {
  width: min(94vw, 400px); max-width: 94vw;
  max-height: calc(100dvh - 20px); overflow-y: auto;
  padding: 14px 16px; gap: 7px; margin: auto 0;
}
.mobile .auth-panel .game-title { font-size: 22px !important; }
.mobile .auth-panel .subtitle { font-size: 12px; margin-bottom: 6px; }
.mobile .chars-panel h2 { font-size: 18px; margin: 2px 0 6px; letter-spacing: 2px; }
.mobile .auth-panel input:not([type="range"]), .mobile .chars-panel input:not([type="range"]),
.mobile #screen-auth input:not([type="range"]):not([type="checkbox"]):not([type="radio"]) {
  font-size: 16px !important; padding: 11px 12px; /* >=16px = fara zoom iOS */
}
.mobile .auth-panel button, .mobile .chars-panel button { padding: 11px 14px !important; min-height: 44px; }
.mobile #char-list { max-height: 38dvh; overflow-y: auto; }
.mobile #class-list { max-height: 40dvh; overflow-y: auto; }
/* ascunde linkurile catre editoarele desktop pe mobil (inutile, ocupa loc) */
.mobile #screen-auth a[href*="editor"] { display: none; }

/* Modal centrat de reconectare (pierdere conexiune / repornire server) */
#reconnect-modal { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; }
.rc-box { background: #241a0f; border: 2px solid #8a6a3e; border-radius: 12px; padding: 26px 34px; text-align: center; color: #f0e1cf; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.rc-spin { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid #4a3826; border-top-color: #f0c040; border-radius: 50%; animation: rc-spin .9s linear infinite; }
@keyframes rc-spin { to { transform: rotate(360deg); } }
.rc-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 18px; color: #f0c040; margin-bottom: 6px; }
.rc-sub { font-size: 13px; color: #bca080; }

/* Modal centrat de restart server (countdown) */
/* banner compact non-intruziv, sus-centru — NU intuneca ecranul, NU blocheaza jocul */
#restart-modal { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 401; pointer-events: none; max-width: 92vw; }
.rs-box { display: inline-flex; align-items: center; gap: 8px; background: rgba(36,26,15,.92); border: 1px solid #b5762c; border-radius: 10px; padding: 8px 14px; color: #f0e1cf; box-shadow: 0 4px 16px rgba(0,0,0,.5); animation: rs-pop .25s ease; white-space: nowrap; }
@keyframes rs-pop { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.rs-icon { font-size: 17px; color: #ffb02e; }
.rs-msg { font-size: 13px; color: #ffcf5a; }
.rs-msg #rs-num { color: #fff; font-size: 15px; }
.rs-now { color: #ffd766; }
.rs-sub { font-size: 12px; color: #bca080; }
.mobile #restart-modal { top: 54px; }

/* Tutorial pas-cu-pas */
#tut-overlay { position: fixed; inset: 0; z-index: 350; background: rgba(0,0,0,.66); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tut-card { width: min(380px, 94vw); background: #241a0f; border: 2px solid #8a6a3e; border-radius: 14px; padding: 20px; text-align: center; color: #f0e1cf; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.tut-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 20px; color: #f0c040; margin-bottom: 10px; }
.tut-body { min-height: 150px; }
.tut-body p { font-size: 14px; line-height: 1.6; margin: 10px 4px 0; } .tut-body b { color: #f0c040; }
.tut-svg { width: 200px; max-width: 72%; height: 120px; margin: 0 auto; display: block; }
.tut-ic { font-size: 52px; margin: 6px 0; }
.tut-dots { display: flex; justify-content: center; gap: 7px; margin: 16px 0 12px; }
.tut-dot { width: 8px; height: 8px; border-radius: 50%; background: #3c2a1e; } .tut-dot.active { background: #f0c040; }
.tut-nav { display: flex; gap: 10px; } .tut-nav .rpg-btn { flex: 1; }
.tut-noshow { display: block; margin-top: 12px; font-size: 12px; color: #8a8f9a; cursor: pointer; } .tut-noshow input { vertical-align: middle; margin-right: 4px; }
.tut-svg .tk { fill: #2a1f12; stroke: #6b5232; stroke-width: 1.5; animation: tk-blink 4s linear infinite; }
.tut-svg .tk-w { animation-delay: 0s; } .tut-svg .tk-a { animation-delay: -3s; } .tut-svg .tk-s { animation-delay: -2s; } .tut-svg .tk-d { animation-delay: -1s; }
@keyframes tk-blink { 0%,16%{fill:#f0c040} 22%,100%{fill:#2a1f12} }
.tut-svg .tkt { fill: #e2d9cc; font-size: 13px; font-weight: 700; text-anchor: middle; }
.tut-svg .tut-char { animation: tut-char-move 4s ease-in-out infinite; }
@keyframes tut-char-move { 0%,92%,100%{transform:translate(0,0)} 6%{transform:translate(0,-15px)} 31%{transform:translate(-15px,0)} 56%{transform:translate(0,15px)} 81%{transform:translate(15px,0)} }
.joy-base-svg { fill: rgba(40,30,20,.5); stroke: rgba(240,192,64,.45); stroke-width: 2; }
.joy-knob-svg { fill: #c79a5e; stroke: #f0c040; stroke-width: 2; animation: joy-move 3s ease-in-out infinite; }
@keyframes joy-move { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-20px,8px)} 45%{transform:translate(18px,-16px)} 70%{transform:translate(16px,16px)} }
.tut-hint { fill: #bca080; font-size: 14px; text-anchor: middle; }

/* Modal de creare cont + buton "caracter nou" + eticheta GM */
#reg-modal { position: fixed; inset: 0; z-index: 360; background: rgba(0,0,0,.66); display: flex; align-items: center; justify-content: center; padding: 16px; }
.reg-box { width: min(320px, 92vw); background: #241a0f; border: 2px solid #8a6a3e; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.7); }
.reg-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 19px; color: #f0c040; text-align: center; margin-bottom: 4px; }
.reg-box input { padding: 10px 12px; background: #160f08; border: 1px solid #8a6a3e; border-radius: 6px; color: #f0e1cf; font-size: 14px; width: 100%; }
.reg-msg { min-height: 15px; font-size: 12px; text-align: center; margin: 0; }
#btn-new-char { width: 100%; margin-bottom: 8px; }
.gm-tag { color: #f0c040; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-weight: 700; font-size: 1.08em; text-shadow: 0 0 6px rgba(240,192,64,.4); }

/* ===== Anti pull-to-refresh / bounce: dragul paginii nu mai da refresh inutil pe mobil ===== */
html, body { overscroll-behavior: none; }

/* tip explicativ pe mobil in modalele de magazin */
.shop-mob-tip {
  margin: 6px 0; padding: 8px 10px; font-size: 12.5px; line-height: 1.45;
  color: #e6d2a8; background: rgba(90,67,38,.28); border: 1px solid #6b5232; border-radius: 6px;
}

/* ===== Anti zoom la dublu-tap (iOS ignora user-scalable=no -> il oprim prin touch-action) ===== */
.mobile, .mobile * { touch-action: manipulation; } /* manipulation = pan/scroll OK, dar fara zoom la dublu-tap */
.mobile #mobile-host, .mobile .act-btn, .mobile .mob-menu-btn, .mobile .joy-base, .mobile .joy-knob, .mobile canvas { touch-action: none; }

/* ===== Popup Recompensa Zilnica ===== */
.login-reward-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.65); backdrop-filter: blur(12px);
}
.login-reward-box {
  background: rgba(24, 17, 12, 0.97);
  border: 1px solid rgba(255, 210, 74, 0.25); border-radius: 18px;
  padding: 32px 36px; min-width: 300px; max-width: 360px;
  text-align: center; 
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 210, 74, 0.15);
  font-family: 'MedievalSharp', 'Cinzel', serif;
  animation: lr-pop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes lr-pop-in {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.lr-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 22px; color: #ffd24a; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(255, 210, 74, 0.3); letter-spacing: 1px; }
.lr-day { font-size: 13px; color: #bca080; margin-bottom: 20px; font-weight: 500; letter-spacing: 0.5px; }
.lr-reward {
  font-size: 24px; font-weight: 800; color: #ffffff;
  padding: 16px 0; margin-bottom: 20px;
  border-top: 1px solid rgba(255, 210, 74, 0.15); border-bottom: 1px solid rgba(255, 210, 74, 0.15);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.02);
}
.lr-grand { color: #ffd24a; text-shadow: 0 0 18px rgba(255, 210, 74, 0.6); font-size: 28px; }
.lr-days-row { display: flex; justify-content: center; gap: 8px; margin-bottom: 24px; }
.lr-dot {
  width: 32px; height: 32px; border-radius: 50%; line-height: 30px; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 210, 74, 0.15); color: #8a8f9a;
  transition: all 0.25s ease;
}
.lr-dot.lr-done { background: rgba(90, 208, 122, 0.18); border-color: #5ad07a; color: #7ad07a; box-shadow: inset 0 0 5px rgba(90, 208, 122, 0.2); }
.lr-dot.lr-today { background: rgba(255, 210, 74, 0.25); border-color: #ffd24a; color: #ffd24a; box-shadow: 0 0 12px rgba(255, 210, 74, 0.5); transform: scale(1.1); }
.lr-ok { margin-top: 0; width: 100%; transition: all 0.2s ease; font-weight: 700; }
.lr-ok:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 210, 74, 0.3); }

/* --- Fereastra calendar recompense zilnice (buton 📅) --- */
.daily-win { width: min(600px, 94vw) !important; max-width: min(600px, 94vw) !important; }
.daily-win .win-body { padding: 20px; font-family: 'MedievalSharp', 'Cinzel', serif; background: #16100b; min-width: 0 !important; max-width: none !important; }
.dl-container { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 18px; }

/* Left Side: Showcase Card */
.dl-showcase {
  flex: 0 0 180px;
  background: rgba(48, 36, 16, 0.6);
  border: 2.5px solid rgba(255, 210, 74, 0.25);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.dl-showcase:hover {
  transform: translateY(-3px);
  border-color: #ffd24a;
  box-shadow: 0 12px 28px rgba(255, 210, 74, 0.15), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.dl-showcase-badge {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  background: #ffd24a; color: #120e0a;
  font-size: 10px; font-weight: 800;
  padding: 2px 10px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(255, 210, 74, 0.3);
}
.dl-showcase-gift {
  font-size: 52px;
  margin: 14px 0 8px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  animation: dl-gift-bounce 2s ease-in-out infinite;
}
@keyframes dl-gift-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.05); }
}
.dl-showcase-title { font-family: 'MedievalSharp', 'Cinzel', serif; font-size: 16px; font-weight: 700; color: #ffd24a; margin-bottom: 6px; text-shadow: 0 2px 8px rgba(255, 210, 74, 0.3); }
.dl-showcase-desc { font-size: 10px; color: #bca080; line-height: 1.35; margin-bottom: 12px; }
.dl-showcase-status {
  font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 6px;
  text-transform: uppercase;
}
.dl-showcase-status.locked { background: rgba(255, 255, 255, 0.05); color: #8a8f9a; border: 1.5px solid rgba(255,255,255,0.08); }
.dl-showcase-status.next { background: rgba(255, 210, 74, 0.2); color: #ffd24a; border: 1.5px solid #ffd24a; animation: pulse 1.5s infinite; }
.dl-showcase-status.done { background: rgba(90, 208, 122, 0.15); color: #7ad07a; border: 1.5px solid #5ad07a; }

/* Right Side: Days 1-6 List */
.dl-list-pane { flex: 1; min-width: 240px; }
.dl-list-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
/* ecrane inguste (mobil): showcase full-width sus, grila de zile dedesubt */
@media (max-width: 520px) {
  .dl-container { flex-direction: column; }
  .dl-showcase { flex: 1 1 auto; width: 100%; }
  .dl-list-pane { min-width: 0; }
}
.mobile .dl-container { flex-direction: column; }
.mobile .dl-showcase { flex: 1 1 auto; width: 100%; }
.mobile .dl-list-pane { min-width: 0; }
.dl-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 210, 74, 0.12);
  transition: all 0.25s ease;
}
.dl-cell:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(3px);
  border-color: rgba(255, 210, 74, 0.25);
}
.dl-icon-badge {
  font-size: 24px;
  flex: 0 0 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dl-cell-content { text-align: left; }
.dl-d { font-size: 11px; font-weight: 800; color: #c9a86a; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.dl-rw { font-size: 12px; line-height: 1.2; color: #ffffff; font-weight: 600; }

.dl-cell.dl-done { background: rgba(90, 208, 122, 0.08); border-color: rgba(90, 208, 122, 0.35); }
.dl-cell.dl-done .dl-rw { color: #9ad08a; text-decoration: line-through; opacity: 0.7; }
.dl-cell.dl-next { background: rgba(255, 210, 74, 0.12); border-color: #ffd24a; box-shadow: 0 0 12px rgba(255, 210, 74, 0.2); }
.dl-check { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #7ad07a; font-size: 14px; font-weight: 900; }
.dl-now { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #ffd24a; font-size: 11px; animation: dl-glow-pulse 1.5s ease-in-out infinite; }

/* Progress bar area */
.dl-progress-container {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 210, 74, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
}
.dl-progress-header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.dl-streak-text { color: #bca080; }
.dl-progress-percent { color: #ffd24a; font-weight: 700; }
.dl-progress-track { height: 8px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.dl-progress-fill { height: 100%; background: #d8a93a; border-radius: 4px; transition: width 0.4s ease; }

.dl-claim {
  margin-top: 14px;
  transition: all 0.2s ease;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.dl-claim:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 210, 74, 0.35);
}
.dl-wait {
  margin-top: 14px;
  padding: 12px;
  background: rgba(90, 208, 122, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(90, 208, 122, 0.2);
  color: #7ad07a;
  font-weight: 600;
}
.dl-streak {
  font-weight: 500;
  letter-spacing: 0.2px;
}

@keyframes goldGlow {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(255, 210, 74, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 4px rgba(255, 210, 74, 0.85));
  }
}

/* ===== Auto-scale HUD (A) — JS seteaza --ui-scale dupa rezolutie * setarea manuala.
   Aplicam scale() pe fiecare cluster cu transform-origin spre coltul lui de ancorare,
   ca sa se micsoreze proportional FARA sa se desprinda de margini. Nu afecteaza .mobile. ===== */
:root { --ui-scale: 1; }
body:not(.mobile) #hud-top    { transform: scale(var(--ui-scale)); transform-origin: top left; }
body:not(.mobile) #menu-bar   { transform: scale(var(--ui-scale)); transform-origin: bottom right; }
body:not(.mobile) #hotbar     { transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: bottom center; }
body:not(.mobile) #chat       { transform: scale(var(--ui-scale)); transform-origin: bottom left; }
body:not(.mobile) #minimap    { transform: scale(var(--ui-scale)); transform-origin: top right; }
body:not(.mobile) #hud-ping   { transform: scale(var(--ui-scale)); transform-origin: top right; }
body:not(.mobile) #hud-yang, body:not(.mobile) #hud-dc { transform: scale(var(--ui-scale)); transform-origin: top right; }
body:not(.mobile) #auto-ind   { transform: translateX(-50%) scale(var(--ui-scale)); transform-origin: top center; }

/* ============================================================================
   REDESIGN v2 — "schelet OSRS, bijuterii WoW, sticla Metin2, suc Hades"
   Gradiente 2-tonuri subtile (material) permise; fara curcubee.
   Strat FINAL: castiga cascada, inclusiv peste regulile !important de mai sus.
   Inlocuieste complet stratul "Faza 2 / lemn sculptat & alama".
   ============================================================================ */

/* ---------- 1. RAMA FERESTREI: seam intunecat + bevel OSRS + fir de aur ---------- */
.win, .win.rpg-modal-win {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #4e3824, #3a2818) !important; /* lemn cald ca in mockup, aproape opac (canvas-ul nu mai spala culoarea) */
  border: 2px solid #1a120b !important;
  border-radius: 2px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: none !important;
}
/* bevel-ul si firul de aur pe un overlay ::before, ca sa NU fie acoperite de
   fundalurile copiilor (titlu/corp). pointer-events:none -> nu blocheaza clickuri */
.win::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 60;
  box-shadow:
    inset 2px 2px 0 #7a5c3d,
    inset -2px -2px 0 #2b1d12,
    inset 0 0 0 3px rgba(201, 163, 92, 0.55);
}
/* 4 coltare aurii SVG (data-URI); pe mobil doar cele 2 de sus, mai mici */
.win::after {
  content: ""; position: absolute; inset: -3px; pointer-events: none; z-index: 61;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 13 V2 H13' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M2 13 V2 H13' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 2 H12 V13' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M1 2 H12 V13' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 1 V12 H13' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M2 1 V12 H13' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M12 1 V12 H1' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M12 1 V12 H1' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E");
  background-position: left top, right top, left bottom, right bottom;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}
.mobile .win::after {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 13 V2 H13' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M2 13 V2 H13' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1 2 H12 V13' fill='none' stroke='%231a120b' stroke-width='4'/%3E%3Cpath d='M1 2 H12 V13' fill='none' stroke='%23c9a35c' stroke-width='2'/%3E%3C/svg%3E");
  background-position: left top, right top;
  background-size: 10px 10px;
}

/* ---------- 2. TITLU: banda mai inchisa, small-caps centrat, fir de aur estompat ---------- */
.win .win-title {
  position: relative;
  justify-content: center;
  /* plăcuța maro caldă (ca mockup), nu negru. Gradientul s-a mutat în blocul SKIN UI de la finalul
     fișierului, ca strat 2 sub textură — aici cu `background: ... !important` ar fi resetat orice skin. */
  color: #f4d79a !important;
  font-family: "MedievalSharp", "Cinzel", serif !important;
  font-variant: small-caps;
  text-transform: none !important;
  letter-spacing: 1.5px;
  text-shadow: 0 1px 0 #1a120b !important;
  border-bottom: 1px solid #1a120b !important;
  box-shadow: none;
}
/* fir de aur care se stinge la capete, sub banda titlului */
.win .win-title::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 163, 92, 0.8), transparent);
  pointer-events: none;
}
/* X de inchidere = buton bevel 30px, hover rosu-brun */
.win .win-title .x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: #c8b89a; font-size: 14px;
  background: linear-gradient(180deg, #4a3524, #3a2818);
  border: 1px solid #1a120b; border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(138, 106, 68, 0.7), inset -1px -1px 0 rgba(16, 10, 5, 0.8);
  transition: background-color 0.09s ease-out, color 0.09s ease-out;
}
.win .win-title .x:hover { background: #6a2318; color: #ffd9c0; }
/* buton minimizare (—) la stanga lui ✕ */
.win .win-title .win-min {
  position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: #c8b89a; font-size: 16px; cursor: pointer;
  background: linear-gradient(180deg, #4a3524, #3a2818);
  border: 1px solid #1a120b; border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(138, 106, 68, 0.7), inset -1px -1px 0 rgba(16, 10, 5, 0.8);
}
.win .win-title .win-min:hover { background: #5a4228; color: #ffd985; }

/* ---------- 3. CORP: transparent -> materialul ramei (usor translucid) se vede ---------- */
/* corpul e transparent — culoarea vine de la .win. `background-color` (nu shorthand-ul) ca sa nu reseteze
   background-image: altfel textura de skin de pe corp n-ar aparea niciodata. */
.win .win-body { background-color: transparent; box-shadow: none; }

/* ---------- NPC: antet cu portret + replica pe pergament + vitrina ---------- */
.npc-win .win-body { min-width: min(360px, 88vw); }
.npc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.npc-portrait {
  width: 52px; height: 60px; flex: 0 0 52px; display: flex; align-items: center; justify-content: center;
  font-size: 27px; background: linear-gradient(180deg, #2a1d10, #1a1108);
  border: 1px solid #c9a35c; border-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%); /* blazon (ca banner-ul de clan) */
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.npc-head-name { font-family: "MedievalSharp", "Cinzel", serif; font-size: 17px; color: #f4d79a; text-shadow: 0 1px 0 #000; }
.npc-head-role { font-size: 11px; color: #b9a888; font-variant: small-caps; letter-spacing: 1px; }
.npc-speech {
  font-style: italic; color: #d8c9b0; font-size: 12.5px; line-height: 1.5;
  background: rgba(0,0,0,.22); border: 1px solid rgba(201,163,92,.28); border-left: 3px solid #c9a35c;
  border-radius: 2px; padding: 7px 10px; margin-bottom: 10px;
}
/* buton mare care deschide panoul de functii al NPC-ului (a 2-a fereastra) — nu inghesuim vitrina in chat */
.npc-open-fn { display: block; width: 100%; margin-top: 4px; padding: 11px; font-size: 14px; letter-spacing: .5px; }
/* panoul de functii: acelasi latime confortabila ca chatul */
.npc-fn-win .win-body { min-width: min(380px, 90vw); }
/* banda-antet tematica a statiei de mestesug (fierar/forja/topitor/bucatar/negustor) */
.fn-banner {
  display: flex; align-items: center; gap: 11px; margin: -2px -2px 11px; padding: 9px 11px;
  border-radius: 6px; border: 1px solid var(--fn-tint, #5a4326);
  background:
    linear-gradient(90deg, var(--fn-glow, rgba(201,163,92,.22)), rgba(20,14,8,0) 78%),
    linear-gradient(180deg, #221812, #160f09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 18px rgba(0,0,0,.5);
}
.fn-medallion {
  flex: 0 0 42px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  font-size: 23px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #33251732, #120c07);
  border: 2px solid var(--fn-tint, #c9a35c);
  box-shadow: 0 0 12px var(--fn-glow, rgba(201,163,92,.4)), inset 0 0 8px rgba(0,0,0,.6);
}
.fn-btitle { font-family: "MedievalSharp", "Cinzel", serif; font-size: 16px; color: var(--fn-title, #f4d79a); text-shadow: 0 1px 0 #000; }
.fn-bflavor { font-size: 11.5px; color: #c3b193; line-height: 1.35; margin-top: 1px; }
/* tente per mestesug */
.fn-theme-steel  { --fn-tint: #7d90a6; --fn-glow: rgba(125,144,166,.42); --fn-title: #d8e2ee; }
.fn-theme-ember  { --fn-tint: #db7a2c; --fn-glow: rgba(219,122,44,.5);   --fn-title: #ffcf94; }
.fn-theme-iron   { --fn-tint: #9a8b72; --fn-glow: rgba(154,139,114,.4);  --fn-title: #e8dcc4; }
.fn-theme-amber  { --fn-tint: #e0a63a; --fn-glow: rgba(224,166,58,.46);  --fn-title: #ffe6a6; }
.fn-theme-molten { --fn-tint: #d8452e; --fn-glow: rgba(216,69,46,.5);    --fn-title: #ffb59e; }
.fn-theme-gold   { --fn-tint: #c9a35c; --fn-glow: rgba(201,163,92,.44);  --fn-title: #f4d79a; }
/* rand de vanzare (Negustor/Fierar) -> arata ca un raft de vitrina */
.npc-win .shop-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px;
  background: #1a130c; border: 1px solid #2a1f12; border-radius: 2px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5), inset 0 -1px 0 rgba(255,255,255,.03);
}
.npc-win .shop-row:hover { border-color: #6b5232; }
.npc-win .shop-row .shop-ic { width: 30px; height: 30px; background: #241812; border: 1px solid #4b382a; border-radius: 2px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.6); padding: 2px; }
.npc-win .shop-row > span:first-child { flex: 1; display: flex; align-items: center; gap: 7px; color: #e8dcc4; }
.npc-win .shop-row .price { color: #f4d79a; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
/* card de reteta (Forjă/Gătit/Nicovală) */
.npc-win .title-row {
  background: #1a130c; border: 1px solid #2a1f12; border-radius: 2px; padding: 8px 10px; margin-bottom: 6px;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
}
.npc-win .title-row:hover { border-color: #6b5232; }
.npc-win .title-name b { color: #f4d79a; }
/* ---------- Negustor: VITRINĂ (Varianta A) — tab-uri + grilă cu plăcuțe de preț + detaliu ---------- */
.shop-vitrine { margin-top: 2px; }
.sv-tabs { display: flex; gap: 3px; padding: 0 2px; position: relative; z-index: 2; flex-wrap: wrap; }
.sv-tab { font-variant: small-caps; letter-spacing: .5px; font-size: 12px; padding: 6px 11px 5px; cursor: pointer; color: #b9a888;
  background: linear-gradient(180deg, #33220f, #281a0c); border: 1px solid #1a120b; border-bottom: none; border-radius: 3px 3px 0 0;
  box-shadow: inset 1px 1px 0 rgba(122,92,61,.5); position: relative; top: 1px; }
.sv-tab:hover { color: #e8dcc4; }
.sv-tab.on { background: linear-gradient(180deg, #4e3824, #3a2818); color: #f4d79a; box-shadow: inset 1px 1px 0 #7a5c3d; }
.sv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 8px; justify-items: center; padding: 12px 4px 4px;
  border: 1px solid #1a120b; border-radius: 0 2px 2px 2px; background: rgba(0,0,0,.18); max-height: 42vh; overflow-y: auto; }
.sv-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.sv-slot { width: 46px; height: 46px; position: relative; background: #241812; border: 1px solid #4b382a; border-radius: 2px;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), inset -1px -1px 0 rgba(122,92,61,.4); display: flex; align-items: center; justify-content: center; }
.sv-slot .icimg { width: 36px; height: 36px; image-rendering: pixelated; }
.sv-slot .pl { position: absolute; left: 2px; top: 0; font-size: 9px; color: #f4d79a; text-shadow: 0 1px 0 #000; font-weight: 700; }
.sv-slot.sel { outline: 2px solid #f4d79a; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), 0 0 9px rgba(244,215,154,.5); }
.sv-item:hover .sv-slot { filter: brightness(1.12); }
.sv-plate { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; color: #f4d79a; margin-top: 3px;
  background: #1c120a; border: 1px solid #4b382a; border-top: none; border-radius: 0 0 2px 2px; padding: 2px 4px; white-space: nowrap; text-shadow: 0 1px 0 #000; }
/* raritate pe sloturi (reutilizabil) */
.slot-rar.ru { border-color: #3fbf3f; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), 0 0 6px rgba(63,191,63,.32); }
.slot-rar.rr { border-color: #4d9fff; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), 0 0 6px rgba(77,159,255,.36); }
.slot-rar.re { border-color: #b055e8; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), 0 0 7px rgba(176,85,232,.4); }
.slot-rar.rl { border-color: #ff9022; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), 0 0 8px rgba(255,144,34,.45); }
/* detaliu + cumparare */
.sv-foot { margin-top: 10px; }
.sv-detail { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(201,163,92,.3); border-radius: 2px; background: rgba(0,0,0,.22); }
.sv-dinfo { flex: 1; min-width: 0; }
.sv-dname { color: #f4d79a; font-size: 13.5px; }
.sv-dmeta { font-size: 11px; }
.sv-qty { display: flex; align-items: center; gap: 4px; }
.sv-qnum { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ibtn { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; border-radius: 2px;
  background: linear-gradient(180deg, #4e3824, #2e2013); border: 1px solid #1a120b; color: #e8dcc4; box-shadow: inset 1px 1px 0 #7a5c3d, inset -1px -1px 0 #2b1d12; }
.ibtn:hover { outline: 1px solid #f4d79a; filter: brightness(1.15); }
.sv-buyrow { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sv-bal { font-size: 13px; } .sv-bal b { color: #f4d79a; font-variant-numeric: tabular-nums; }
.sv-buy { min-width: 160px; }
.sv-hint { font-style: italic; }
.sv-foot > .sv-hint + .sv-bal { display: inline-block; margin-top: 8px; }

/* ---------- Bucatar COOK C (bazar): grila + detaliu lateral ---------- */
.cook-bazar { display: flex; gap: 10px; }
.cb-grid { display: grid; grid-template-columns: repeat(3, 44px); gap: 6px; align-content: start; max-height: 48vh; overflow-y: auto; }
.cb-cell { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #241812; border: 1px solid #4b382a; border-radius: 2px; box-shadow: inset 1px 1px 0 rgba(0,0,0,.7), inset -1px -1px 0 rgba(122,92,61,.4); }
.cb-cell .icimg { width: 34px; height: 34px; image-rendering: pixelated; }
.cb-cell:hover { filter: brightness(1.12); border-color: #7a5c3a; }
.cb-cell.sel { outline: 2px solid #f4d79a; box-shadow: 0 0 9px rgba(244,215,154,.5); }
.cb-cell.off { opacity: 0.45; }
.cb-detail { flex: 1; min-width: 0; border-left: 1px solid rgba(201,163,92,.3); padding-left: 10px; display: flex; flex-direction: column; align-items: center; }
.cb-preview { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #241812; border: 1px solid #8a6f45; border-radius: 3px; box-shadow: inset 0 0 10px rgba(0,0,0,.6); }
.cb-preview .icimg { width: 46px; height: 46px; image-rendering: pixelated; }
.cb-name { color: #f4d79a; font-size: 14px; margin-top: 6px; text-align: center; }
.buff-badge { font-size: 11px; padding: 2px 9px; border-radius: 2px; font-weight: 700; font-variant: small-caps; letter-spacing: .5px; margin-top: 5px; }
.buff-badge.xp { background: rgba(90,150,240,.16); border: 1px solid #5a96f0; color: #9cc4ff; }
.buff-badge.spd { background: rgba(90,208,122,.16); border: 1px solid #5cd07a; color: #8fe0a0; }
.buff-badge.atk { background: rgba(224,120,80,.16); border: 1px solid #e07850; color: #ffb49a; }
.buff-badge.reg { background: rgba(200,120,255,.14); border: 1px solid #b878e0; color: #d9b0ff; }
.cb-mats { align-self: stretch; margin: 9px 0; border-top: 1px solid rgba(201,163,92,.2); padding-top: 8px; font-size: 12px; line-height: 1.7; }
.cb-mat { color: #cbb890; }
.cb-mat.ok { color: #8fe08f; } .cb-mat.no { color: #e08a7a; }
.cb-mat b { font-variant-numeric: tabular-nums; }
.cook-craft-btn { width: 100%; margin-top: auto; background: linear-gradient(180deg, #a04a1a, #7a3510) !important; border: 1px solid #d07a3a !important; color: #ffe0c0 !important; text-shadow: 0 1px 0 #3a1608; box-shadow: inset 1px 1px 0 rgba(255,180,120,.3), inset -1px -1px 0 rgba(0,0,0,.5) !important; }
.cook-craft-btn:hover:not(:disabled) { filter: brightness(1.15); }

/* ---------- Topitor SMELT B (tabel de conversie) ---------- */
.smelt-tbl { display: grid; grid-template-columns: 1fr auto auto auto; border: 1px solid #1a120b; border-radius: 2px; overflow: hidden; font-size: 12px; }
.smelt-tbl .st-h { padding: 5px 8px; background: rgba(0,0,0,.32); color: #f4d79a; font-variant: small-caps; letter-spacing: .5px; }
.smelt-tbl .st-c { text-align: center; }
.smelt-tbl .st-mat, .smelt-tbl .st-cell { padding: 6px 8px; display: flex; align-items: center; gap: 6px; }
.smelt-tbl > div:nth-child(8n+5), .smelt-tbl > div:nth-child(8n+6), .smelt-tbl > div:nth-child(8n+7), .smelt-tbl > div:nth-child(8n+8) { background: rgba(255,255,255,.03); }
.smelt-tbl .icimg { width: 22px; height: 22px; image-rendering: pixelated; }
.st-have { color: #8fe08f; font-variant-numeric: tabular-nums; }
.st-out { color: #b9a888; justify-content: center; } .st-out small { color: #7a6a4a; }
.st-lots { justify-content: center; color: #f4d79a; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-act { justify-content: center; padding: 4px 6px !important; }
.smelt-btn { min-width: 34px; padding: 4px 8px !important; background: linear-gradient(180deg, #a04a1a, #7a3510) !important; border-color: #d07a3a !important; color: #ffe0c0 !important; }
.smelt-all { text-align: right; margin-top: 10px; }
.smelt-all .cook-craft-btn { width: auto; display: inline-flex; padding: 0 16px; }
.smelt-empty { text-align: center; padding: 24px; }

/* butoanele de faurire/gatit = ember (jar), CTA-ul cald al meseriasilor */
.npc-win .title-state .cosm-use, .npc-win .shop-buy .small {
  background: linear-gradient(180deg, #a04a1a, #7a3510) !important;
  border: 1px solid #d07a3a !important; color: #ffe0c0 !important;
  text-shadow: 0 1px 0 #3a1608; font-weight: 700;
  box-shadow: inset 1px 1px 0 rgba(255,180,120,.3), inset -1px -1px 0 rgba(0,0,0,.5) !important;
}
.npc-win .title-state .cosm-use:hover, .npc-win .shop-buy .small:hover { filter: brightness(1.15); }

/* fontul din mockup (MedievalSharp) si pe HEADERE/NUME, nu doar pe titlul ferestrei */
.fr-head, .guild-title, .gb-name, .lb-title, .bp-section-h, .mail-read .mr-head b,
.smith-item, .title-name b, .shop-h, .sh, .coll-head, .cosm-cat-h {
  font-family: "MedievalSharp", "Cinzel", Georgia, serif;
}
/* fontul nou (RPG) si pe chat, info si numele de caracter din HUD / tinta */
#chat-lines, #target-name {
  font-family: "MedievalSharp", "Cinzel", serif;
}
#chat-lines { font-size: calc(12.5px * var(--chat-scale, 1)); line-height: 1.45; }

/* panourile-surori primesc acelasi material (opacitate un pic mai mare, sunt mici) */
.ctx-menu, .drop-box, .npctut-box, .split-box, .tut-card, .reg-box, .rc-box, .fullmap-box, #party-panel, .mob-sheet-panel {
  background: linear-gradient(180deg, rgba(74, 53, 36, 0.95), rgba(58, 40, 24, 0.95));
  border: 2px solid #1a120b;
  border-radius: 2px;
  box-shadow:
    inset 2px 2px 0 #7a5c3d,
    inset -2px -2px 0 #2b1d12,
    inset 0 0 0 3px rgba(201, 163, 92, 0.4),
    0 14px 36px rgba(0, 0, 0, 0.7);
}

/* ---------- 4. BUTOANE (sistem WoW UIPanelButton) ---------- */
button, .rpg-btn, button.skill-btn, .menu-btn {
  border-radius: 2px;
  border: 1px solid #1a120b;
  background: linear-gradient(180deg, #4a3524, #3a2818);
  color: #e8d5b0;
  text-shadow: 0 1px 0 #1a120b;
  box-shadow: inset 1px 1px 0 rgba(138, 106, 68, 0.75), inset -1px -1px 0 rgba(16, 10, 5, 0.85), 0 2px 3px rgba(0, 0, 0, 0.45);
  transition: filter 0.09s ease-out, transform 0.09s ease-out, box-shadow 0.09s ease-out, background-color 0.09s ease-out;
}
button:hover, .rpg-btn:hover, .menu-btn:hover {
  background: linear-gradient(180deg, #55402c, #43301e);
  color: #f4d79a;
  filter: brightness(1.1);
  box-shadow: inset 1px 1px 0 rgba(138, 106, 68, 0.75), inset -1px -1px 0 rgba(16, 10, 5, 0.85), 0 2px 3px rgba(0, 0, 0, 0.45), 0 0 7px rgba(201, 163, 92, 0.28);
}
button:active, .rpg-btn:active, .menu-btn:active,
.rpg-btn.btn-accept:active, .rpg-btn.btn-cancel:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
  box-shadow: inset 1px 1px 0 rgba(16, 10, 5, 0.85), inset -1px -1px 0 rgba(138, 106, 68, 0.4);
}
/* variante — frati vizuali (2 tonuri + bordura proprie) */
.rpg-btn-primary, .rpg-confirm-actions .rpg-btn-primary {
  background: linear-gradient(180deg, #7a2f22, #5a1f16);
  border: 1px solid #c9a35c; color: #f4d79a;
}
.rpg-btn-primary:hover, .rpg-confirm-actions .rpg-btn-primary:hover { background: linear-gradient(180deg, #8c392a, #68251a); }
.rpg-btn.btn-accept { background: linear-gradient(180deg, #2e6f32, #1e4a22); border: 1px solid #1a120b; color: #d8ffd8; }
.rpg-btn.btn-accept:hover { background: linear-gradient(180deg, #38803c, #26562a); }
.rpg-btn.btn-cancel, .rpg-btn.danger, .mob-act.danger {
  background: linear-gradient(180deg, #7a2a20, #521a12);
  border: 1px solid #b05040; color: #ffd0c4;
}
.rpg-btn.btn-cancel:hover, .rpg-btn.danger:hover { background: linear-gradient(180deg, #8c352a, #5e2018); }
.gm-online-actions .rpg-btn.danger, .gm-panel-content .rpg-btn.danger {
  background: linear-gradient(180deg, #943232, #6a2222); border-color: #b05040; color: #fff;
}
/* mestesug (fierar/topitor/forja): jar */
.smith-act-btn { background: linear-gradient(180deg, #a04a1a, #7a3510); border: 1px solid #1a120b; color: #ffdcc0; }
.smith-act-btn:hover:not(:disabled) { background: linear-gradient(180deg, #b45a24, #8a3f14); }
/* meniul context ramane plat (hover transparent) */
.ctx-menu button, .saved-account-btn, .saved-account-del {
  background: transparent; border: none; box-shadow: none; text-shadow: none; border-radius: 2px;
}
.ctx-menu button:hover { background: #3e2d1f; color: #f0c040; filter: none; box-shadow: none; }
/* tinte de atins pe mobil */
.mobile .rpg-btn:not(.sm):not(.small-btn):not(.small) { min-height: 40px; }

/* ---------- 5. TABURI-DOSAR: activul se uneste vizual cu corpul ---------- */
.mail-tab, .inv-tab, .wiki-tab, .gc-pay-btn {
  background: linear-gradient(180deg, #2c1e12, #241811);
  border: 1px solid #1a120b;
  border-radius: 3px 3px 0 0;
  color: #9a8568;
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(122, 92, 61, 0.35);
  transition: color 0.09s ease-out, background-color 0.09s ease-out, transform 0.09s ease-out;
}
.mail-tab:hover, .inv-tab:hover, .wiki-tab:hover { color: #c8b89a; transform: translateY(-1px); }
.mail-tab.active, .inv-tab.active, .wiki-tab.active, .gc-pay-btn.sel {
  background: linear-gradient(180deg, #4a3524, #3f2c1b);
  color: #f4d79a;
  border-color: rgba(201, 163, 92, 0.55);
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(138, 106, 68, 0.6);
  transform: none;
}

/* ---------- 6. SLOTURI: bevel scufundat + sistem de raritate ---------- */
.inv-slot, .bank-slot, .shop-slot, .trade-grid-slot, .eq-slot, .inspect-slot, .hot-slot {
  background: radial-gradient(circle at 50% 30%, #241813, #150d07);
  border-radius: 5px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(230, 196, 126, 0.06);
}
.inv-slot:hover, .bank-slot.occupied:hover, .shop-slot.filled:hover, .trade-grid-slot.occupied:hover,
.eq-slot:hover, .inspect-slot.filled:hover, .hot-slot:hover {
  outline: 1px solid #c9a35c; outline-offset: -1px; filter: brightness(1.15);
}
/* sloturile goale raman la fel, doar mai stinse */
.inv-slot:empty, .bank-slot:empty, .shop-slot:empty, .trade-grid-slot:empty { opacity: 0.8; }
/* raritate — bordura slotului (clasele pot fi adoptate de TS pe sloturi/iteme) */
.rar-common    { border-color: #d8d0c0 !important; }
.rar-uncommon  { border-color: #3fbf3f !important; box-shadow: inset 2px 2px 3px rgba(0,0,0,.6), 0 0 6px rgba(63,191,63,.25) !important; }
.rar-rare      { border-color: #4d9fff !important; box-shadow: inset 2px 2px 3px rgba(0,0,0,.6), 0 0 6px rgba(77,159,255,.25) !important; }
.rar-epic      { border-color: #b055e8 !important; box-shadow: inset 2px 2px 3px rgba(0,0,0,.6), 0 0 6px rgba(176,85,232,.25) !important; }
.rar-legendary { border-color: #ff9022 !important; box-shadow: inset 2px 2px 3px rgba(0,0,0,.6), 0 0 6px rgba(255,144,34,.25) !important; }
/* raritate — culoarea numelui */
.rn-common { color: #d8d0c0; } .rn-uncommon { color: #3fbf3f; } .rn-rare { color: #4d9fff; }
.rn-epic { color: #b055e8; } .rn-legendary { color: #ff9022; }

/* ---------- 7. RANDURI DE LISTA: zebra + bara aurie pe selectie ---------- */
.mail-row, .fr-row, .lb-row, .premium-row, .gm-online-row, .title-row, .daily-row, .shop-row, .bp-quest, .guild-motd {
  border-radius: 2px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 0.09s ease-out, background-color 0.09s ease-out, transform 0.09s ease-out;
}
.mail-row:nth-child(even), .fr-row:nth-child(even), .lb-row:nth-child(even), .premium-row:nth-child(even),
.gm-online-row:nth-child(even), .title-row:nth-child(even), .daily-row:nth-child(even), .shop-row:nth-child(even) {
  background: #1e160e;
}
.mail-row:hover, .fr-row:hover, .lb-row:hover, .premium-row:hover, .gm-online-row:hover,
.title-row:hover, .daily-row:hover, .shop-row:hover {
  background: #241b12; transform: translateY(-1px); border-color: #6b5232;
}
.mail-row.sel, .title-row.active {
  border-color: #c9a35c;
  box-shadow: inset 3px 0 0 #c9a35c, inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.mail-row.sel:hover { background: #241b12; }
/* clasament: aur / argint / bronz */
.lb-list .lb-row:nth-child(1) { border-color: #c9a35c; background: #241b12; }
.lb-list .lb-row:nth-child(1) .lb-val { color: #ffd24a; }
.lb-list .lb-row:nth-child(2) { border-color: #b8c4d8; }
.lb-list .lb-row:nth-child(3) { border-color: #c08a5a; }

/* ---------- 8. SUC (Hades): intrari animate, tranzitii scurte ---------- */
/* Animatiile de INTRARE ruleaza DOAR pe .win-open-anim (setat de makeWindow la deschidere reala).
   La re-randare (gold/tab/roster update) clasa lipseste -> zero flicker. */
@keyframes winOpen { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.win.win-open-anim { animation: winOpen 0.12s ease-out; }
@keyframes rowIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.win-open-anim .lb-list > *, .win-open-anim .gm-online-list > *, .win-open-anim .shop-items > *, .win-open-anim .fr-section > * {
  animation: rowIn 0.14s ease-out backwards;
}
.win-open-anim .lb-list > :nth-child(2), .win-open-anim .gm-online-list > :nth-child(2), .win-open-anim .shop-items > :nth-child(2), .win-open-anim .fr-section > :nth-child(2) { animation-delay: 20ms; }
.win-open-anim .lb-list > :nth-child(3), .win-open-anim .gm-online-list > :nth-child(3), .win-open-anim .shop-items > :nth-child(3), .win-open-anim .fr-section > :nth-child(3) { animation-delay: 40ms; }
.win-open-anim .lb-list > :nth-child(4), .win-open-anim .gm-online-list > :nth-child(4), .win-open-anim .shop-items > :nth-child(4), .win-open-anim .fr-section > :nth-child(4) { animation-delay: 60ms; }
.win-open-anim .lb-list > :nth-child(5), .win-open-anim .gm-online-list > :nth-child(5), .win-open-anim .shop-items > :nth-child(5), .win-open-anim .fr-section > :nth-child(5) { animation-delay: 80ms; }
.win-open-anim .lb-list > :nth-child(6), .win-open-anim .gm-online-list > :nth-child(6), .win-open-anim .shop-items > :nth-child(6), .win-open-anim .fr-section > :nth-child(6) { animation-delay: 100ms; }
.win-open-anim .lb-list > :nth-child(n+7), .win-open-anim .gm-online-list > :nth-child(n+7), .win-open-anim .shop-items > :nth-child(n+7), .win-open-anim .fr-section > :nth-child(n+7) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .win.win-open-anim, .win-open-anim .lb-list > *, .win-open-anim .gm-online-list > *, .win-open-anim .shop-items > *, .win-open-anim .fr-section > * { animation: none !important; }
}

/* ---------- 9. BARE DE PROGRES: cadru-instrument + umplere 2-tonuri ---------- */
.coll-bar, .bp-bar, .daily-bar, .dl-progress-track, #party-panel .party-bar, .bar, .skill-level-bar {
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.bar.xp .fill, .coll-fill, .bp-bar-fill, .daily-fill, .dl-progress-fill, #party-panel .party-xpfill {
  background: linear-gradient(180deg, #e0b040, #b07e1e);
}
.bar.hp .fill { background: linear-gradient(180deg, #d84545, #a02020); }
.bar.mp .fill { background: linear-gradient(180deg, #2f7fd6, #144e9c); }
#party-panel .party-hpfill { background: linear-gradient(180deg, #3f9f46, #256a2a); }
#party-panel .party-mpfill { background: linear-gradient(180deg, #3f7fc0, #1f4e86); }

/* ---------- 10. DETALII PASTRATE (foste faza 2, actualizate la paleta noua) ---------- */
/* capete de sectiune cu romb de aur */
.fr-head::before, .bp-section-h::before, .ss-inshop-head::before, .premium-cosm-head::before, .guild-title::before {
  content: "◆"; color: #c9a35c; font-size: 9px; margin-right: 6px; vertical-align: 1px;
}
/* inel de focus auriu pe inputuri */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus, select:focus {
  border-color: #c9a35c;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(201, 163, 92, 0.25);
  outline: none;
}
/* scrollbar-uri de lista in tema lemnului */
.mail-list::-webkit-scrollbar, .lb-list::-webkit-scrollbar, .gm-online-list::-webkit-scrollbar,
.shop-msglog::-webkit-scrollbar, .mr-text::-webkit-scrollbar, .bank-grid::-webkit-scrollbar,
.shop-setup-list::-webkit-scrollbar, .cosm-slide-body::-webkit-scrollbar {
  width: 8px;
}
.mail-list::-webkit-scrollbar-thumb, .lb-list::-webkit-scrollbar-thumb, .gm-online-list::-webkit-scrollbar-thumb,
.shop-msglog::-webkit-scrollbar-thumb, .mr-text::-webkit-scrollbar-thumb, .bank-grid::-webkit-scrollbar-thumb,
.shop-setup-list::-webkit-scrollbar-thumb, .cosm-slide-body::-webkit-scrollbar-thumb {
  background: #4a3826; border: 1px solid #2a1f12; border-radius: 4px;
}
.mail-list::-webkit-scrollbar-track, .lb-list::-webkit-scrollbar-track, .gm-online-list::-webkit-scrollbar-track,
.shop-msglog::-webkit-scrollbar-track, .mr-text::-webkit-scrollbar-track, .bank-grid::-webkit-scrollbar-track,
.shop-setup-list::-webkit-scrollbar-track, .cosm-slide-body::-webkit-scrollbar-track {
  background: #16100b;
}
/* stari goale (mailbox-ul isi injecteaza propriul .empty-orn din TS — fara ::before dublat) */
.mail-empty, .shop-empty { color: #7a6a52; font-style: italic; }
.shop-empty::before { content: "📦"; display: block; font-size: 36px; opacity: 0.5; margin-bottom: 8px; font-style: normal; }

/* ---------- 11. PERSONALITATE PER-MODAL ---------- */
/* Duel: rama si titlu rosu-pericol */
.duel-invite-win.rpg-modal-win { border-color: #7a2f22 !important; }
.duel-invite-win .win-title { color: #ff9a80 !important; }
/* Barbut: masa de zaruri calda */
.barbut-win .bb-arena { border-color: #8a5a2a; background: rgba(20, 12, 6, 0.5); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
/* Clan: alama + banner cu blazon (fidel mockup) */
.guild-win.rpg-modal-win { border-color: #4a3524 !important; }
.guild-win .win-title { color: #ffd985 !important; }
.guild-banner { display: flex; gap: 11px; align-items: center; padding: 9px 11px; background: linear-gradient(180deg, #241812, #1a110b); border: 1px solid #3c2a1e; border-radius: 2px; margin-bottom: 8px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.gb-crest { width: 46px; height: 52px; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.gb-main { flex: 1; min-width: 0; }
.gb-name { font-family: "MedievalSharp", "Cinzel", serif; font-size: 17px; color: #f4d79a; text-shadow: 0 1px 0 #1a120b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-meta { font-size: 11px; color: #9a8568; margin-top: 2px; }
.gb-meta b { color: #cbb890; }
.gb-xp { margin-top: 6px; height: 11px; background: #140d08; border: 1px solid #3c2a1e; border-radius: 2px; position: relative; overflow: hidden; }
.gb-xp .fill { height: 100%; background: linear-gradient(180deg, #e0b040, #b07e1e); }
.gb-xp .lbl { position: absolute; inset: 0; text-align: center; font-size: 8.5px; line-height: 11px; color: #fff; text-shadow: 0 1px 1px #000; letter-spacing: .3px; }
/* roster pe coloane: dot | rol-icon | nume | rol | Lv (+ butoane management) */
.g-ric { width: 17px; text-align: center; flex: 0 0 auto; font-size: 12px; }
.g-role { flex: 0 0 auto; font-size: 11px; }
.g-lv { flex: 0 0 auto; min-width: 40px; text-align: right; font-size: 11.5px; color: #cbb890; font-weight: 700; }
/* MOTD = fasie de pergament deschisa (ca panoul de mail) */
.guild-motd { background: linear-gradient(180deg, #d9c49a, #c9b184) !important; color: #3a2a16 !important; border: 1px solid #8a6f45 !important; box-shadow: inset 0 0 12px rgba(122, 84, 32, 0.3); }
.guild-motd .gm-label { color: #7a3a1a !important; }
.guild-motd .gm-text { color: #3a2a16 !important; }
.g-hint { font-size: 10.5px; margin-top: 5px; text-align: center; }
/* Prieteni: punct online cu licar verde */
.fr-row.on .fr-dot { box-shadow: 0 0 6px #4ad24a, 0 0 0 1px #0a2a0a; }
/* Posta: panoul de citire = PERGAMENT DESCHIS (fidel mockup) cu margini perforate + text inchis */
.mail-read {
  background: linear-gradient(180deg, #d9c49a, #c9b184);
  color: #3a2a16;
  border: 1px solid #8a6f45; border-radius: 2px; padding: 12px 14px;
  box-shadow: inset 0 0 18px rgba(122, 84, 32, 0.35), 0 2px 5px rgba(0, 0, 0, 0.4);
  position: relative;
}
.mail-read::before, .mail-read::after {
  content: ""; position: absolute; left: 0; right: 0; height: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(90, 60, 20, 0.25) 5px 10px);
}
.mail-read::before { top: 0; }
.mail-read::after { bottom: 0; }
.mail-read .mr-head b {
  font-family: "MedievalSharp", "Cinzel", serif; font-size: 15px; color: #2a1c0e;
  border-bottom: 1px solid rgba(90, 60, 20, 0.35); padding-bottom: 4px;
}
.mail-read .mr-text { color: #3a2a16; }
.mail-read .muted, .mail-read .mr-meta { color: #6a5230; }
.mail-read .mr-meta-b { color: #4a3416; }
.mail-read .mail-empty { color: #6a5230; }
/* atasamente pe pergament: eticheta small-caps + sloturi de item + chip-uri de moneda */
.mail-attach { background: rgba(255, 255, 255, 0.22); border: 1px solid #8a6f45; }
.ma-label { font-size: 11px; font-variant: small-caps; letter-spacing: 1px; color: #6a4f28; margin-bottom: 5px; font-weight: 700; }
.ma-slots { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.ma-actions { display: flex; justify-content: flex-end; margin-top: 8px; padding-right: 54px; } /* padding-right = spatiu de garda pt pana plutitoare (nu se mai suprapun) */
/* butonul de revendicare sta pe PERGAMENT deschis -> aurul implicit al .rpg-btn se pierde. Ceara rosie = contrast. */
/* background-image: none = anuleaza textura de skin UI (--skin-btn), care altfel lasa butonul transparent pe pergament */
.mail-read .mail-attach .ma-actions .rpg-btn { white-space: nowrap; background-image: none; background-color: #7a2a1c; border-color: #c9a35c; color: #ffe9c4; text-shadow: 0 1px 2px rgba(0,0,0,.65); font-weight: 700; }
.mail-read .mail-attach .ma-actions .rpg-btn:hover:not(:disabled) { background-color: #963826; }
.mail-read .mail-attach .ma-actions .rpg-btn:disabled { background-image: none; background-color: #7a6a56; border-color: #8a7a66; color: #d8ccb8; }
.ma-slot { width: 40px; height: 40px; position: relative; background: #241812; border: 1px solid #4a3826; border-radius: 2px; display: flex; align-items: center; justify-content: center; box-shadow: inset 1px 1px 0 #170f09, inset -1px -1px 0 #3a2a1c; }
.ma-slot .icimg { width: 32px; height: 32px; image-rendering: pixelated; }
.ma-slot .ct { position: absolute; right: 2px; bottom: 1px; font-size: 10px; color: #ffe9a0; text-shadow: 0 1px 2px #000; }
.ma-slot .pl { position: absolute; top: 1px; left: 3px; font-size: 9px; color: #e6c84a; text-shadow: 0 1px 2px #000; font-weight: 700; }
.ma-chip { background: rgba(40, 27, 12, 0.85); border: 1px solid #8a6f45; border-radius: 3px; padding: 3px 8px; font-size: 12px; color: #ffd24a; font-weight: 700; text-shadow: 0 1px 2px #000; }
/* Banca: seif — inel interior gros */
#win-bank .win-body { box-shadow: inset 0 0 0 2px #2b1d12 !important; }


/* 🕳 Abis: linie pasive in banner + modal de alegere pasiva (1 din 3) */
.db-pass { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: auto; } /* #hud e pointer-events:none -> reactiveaza ca sa prinda hover-ul tooltip */
.db-pass-b { display: inline-flex; align-items: center; gap: 1px; font-size: 15px; line-height: 1; padding: 2px 4px; cursor: help;
  background: rgba(70, 20, 12, .55); border: 1px solid #7a3320; border-radius: 5px; filter: drop-shadow(0 1px 1px #000); }
.db-pass-b b { font-size: 11px; color: #f0c98a; }
/* z-index 9250: modale BLOCANTE (redenumire, alegere etaj Abis) trebuie sa fie PESTE ferestre — ferestrele
   urca singure (winZTop) si backdrop-ul lor e deja 119, deci vechiul 60 le ascundea sub inventar. */
.abyss-pick-ov { position: fixed; inset: 0; z-index: 9250; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(60,8,8,.55), rgba(0,0,0,.82)); backdrop-filter: blur(2px); }
.ap-box { background: linear-gradient(#241109, #160a05); border: 2px solid #6a2118; border-radius: 12px; padding: 18px 20px 22px;
  box-shadow: 0 0 40px rgba(180,30,30,.35), inset 0 0 0 1px #2b1710; max-width: 92vw; text-align: center; }
.ap-title { font-family: 'MedievalSharp', serif; font-size: 22px; color: #f0c98a; text-shadow: 0 2px 4px #000; }
.ap-sub { font-size: 12px; color: #b98; margin: 4px 0 14px; }
.ap-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.ap-card { width: 150px; cursor: pointer; background: linear-gradient(#2e160c, #1c0d06); border: 2px solid #7a3320;
  border-radius: 10px; padding: 14px 10px; color: #e8d6c0; transition: transform .08s, border-color .12s, box-shadow .12s; }
.ap-card:hover { transform: translateY(-3px); border-color: #d89a3a; box-shadow: 0 6px 18px rgba(216,60,40,.4); }
.af-lostbox { background: rgba(0,0,0,.3); border: 1px solid #4a1e14; border-radius: 8px; padding: 10px 12px; margin: 6px 2px;
  display: flex; flex-direction: column; gap: 5px; max-height: 200px; overflow-y: auto; }
.af-loss { font-size: 13px; color: #e8b088; display: flex; align-items: center; gap: 6px; justify-content: center; }
.af-loss .muted { color: #96736a; font-size: 11px; }
.af-loss .af-ic { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; }
/* 🏦 varianta de SUCCES (bancare): rama verde in loc de rosu, textul auriu */
.ab-win .af-lostbox { border-color: #2e6b34; }
.ab-win .af-loss { color: #e8d088; }
/* 📦 Picker de cufere suprapuse */
.chest-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.chest-row { display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left;
  background: linear-gradient(#2e160c, #1c0d06); border: 2px solid #7a3320; border-radius: 10px; padding: 10px 14px;
  color: #e8d6c0; font: 700 15px 'Segoe UI', system-ui, sans-serif; transition: transform .08s, border-color .12s, box-shadow .12s; }
.chest-row:hover { transform: translateY(-2px); border-color: #d89a3a; box-shadow: 0 5px 16px rgba(216,60,40,.4); }
.chest-row.chest-open { opacity: .72; border-color: #4a3a28; }
.chest-ico { font-size: 22px; }
.chest-nm .muted { color: #96736a; font-size: 12px; font-weight: 400; }
.ap-icon { font-size: 34px; line-height: 1; }
.ap-name { font-family: 'MedievalSharp', serif; font-size: 17px; color: #f0c98a; margin: 6px 0 4px; }
.ap-desc { font-size: 12px; color: #cdb59c; line-height: 1.3; }

/* ✨ Garderobă: carduri cu portretul caracterului + cosmeticul compus deasupra */
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; margin: 4px 0 10px; }
.cos-card { background: linear-gradient(#241109, #180b06); border: 1.5px solid #5a2a18; border-radius: 9px; padding: 6px 5px 7px; text-align: center; }
.cos-card.active { border-color: #d89a3a; box-shadow: 0 0 0 1px #d89a3a, 0 3px 10px rgba(216, 60, 40, .3); }
.cos-fig { position: relative; width: 100%; max-width: 84px; aspect-ratio: 1; margin: 0 auto; overflow: visible; }
.cos-body { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; z-index: 1; }
.cos-body.cos-nobody { display: flex; align-items: center; justify-content: center; font-size: 44px; filter: grayscale(.3) opacity(.7); }
/* skin-uri compuse: centrate pe CENTRUL corpului (50%/65% din cadru); latimea o pune cosSizeFx */
/* max-width/height: fara ele, un PNG de 256px se randa la marime nativa si acoperea toata fereastra
   (nu doar figurina). Plafonul e relativ la .cos-fig, deci merge si in tooltip, si in panoul mare. */
.cos-fx { position: absolute; left: 50%; top: 65%; transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; z-index: 2; pointer-events: none; }
.cos-fx.cos-back { z-index: 0; opacity: .96; }
.cos-auraFx { position: absolute; left: 50%; top: 65%; width: 96%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none; }
.cos-plate { margin-bottom: 2px; min-height: 16px; text-align: center; } /* nameplate DEASUPRA caracterului (ca in joc) */
.cos-nm { font-size: 12px; color: #e8d6c0; text-shadow: 0 1px 2px #000; }
.cos-badgeFx { height: 14px; vertical-align: middle; image-rendering: pixelated; }
.cos-ttl { display: block; color: #f0c98a; font-size: 12px; font-weight: 700; }
.cos-sub { display: block; font-size: 10px; color: #b89; }
.cos-cap { font-size: 11px; color: #cdb59c; margin-top: 3px; line-height: 1.25; min-height: 26px; display: flex; align-items: center; justify-content: center; }
.cos-act { margin-top: 3px; }

/* Prompt "F" langa cufere (desktop) — keycap pulsatoriu */
#interact-prompt { position: fixed; transform: translate(-50%, -100%); pointer-events: none; z-index: 45; display: flex; align-items: center; gap: 6px; }
#interact-prompt .ip-lbl { font: 700 12px 'Segoe UI', system-ui, sans-serif; color: #f0e1cf; white-space: nowrap;
  padding: 2px 7px; background: rgba(20,14,8,.82); border: 1px solid #6b5232; border-radius: 5px; text-shadow: 0 1px 2px #000; }
#interact-prompt .ip-key { display: inline-block; min-width: 20px; padding: 3px 8px; text-align: center;
  font: 800 15px 'Segoe UI', system-ui, sans-serif; color: #2a1a08; letter-spacing: .5px;
  background: linear-gradient(#ffe9b0, #e6b45a); border: 2px solid #7a4e14; border-bottom-width: 4px;
  border-radius: 6px; box-shadow: 0 2px 7px rgba(0,0,0,.55); animation: ipPulse .9s ease-in-out infinite; }
@keyframes ipPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.16); filter: brightness(1.18); } }

/* Avertisment de cast al bossului — sub bara #hud-target, pulsatoriu */
#boss-warn { position: fixed; top: 66px; left: 50%; transform: translate(-50%, -6px); z-index: 46; pointer-events: none;
  padding: 5px 16px; border-radius: 8px; white-space: nowrap; font: 800 15px 'Segoe UI', system-ui, sans-serif; color: #fff;
  background: linear-gradient(#c9481f, #8a2410); border: 2px solid #ffd24a; text-shadow: 0 1px 2px #000;
  box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 16px rgba(255,180,60,.5); opacity: 0; transition: opacity .12s, transform .12s; }
#boss-warn.show { opacity: 1; transform: translate(-50%, 0); animation: bossWarnPulse .5s ease-in-out infinite; }
@keyframes bossWarnPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }

/* 🌋 Ambianță de hartă fierbinte (vulcan): vignette cald-portocaliu subtil, persistent */
body.map-hot::before { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(105% 80% at 50% 42%, transparent 55%, rgba(180,60,15,.16) 88%, rgba(120,30,0,.30) 100%);
  mix-blend-mode: multiply; }

/* ☀ Arșiță: vignette rosu pulsatoriu peste tot ecranul + eticheta HUD */
body.overheating::after { content: ""; position: fixed; inset: 0; z-index: 44; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(200,40,10,.22) 78%, rgba(150,20,0,.42) 100%);
  animation: heatPulse 2.4s ease-in-out infinite; }
@keyframes heatPulse { 0%,100% { opacity: .7; } 50% { opacity: 1; } }
#heat-warn { position: fixed; top: 92px; left: 50%; transform: translate(-50%, -6px); z-index: 46; pointer-events: none;
  padding: 5px 16px; border-radius: 8px; max-width: 92vw; text-align: center; font: 800 14px 'Segoe UI', system-ui, sans-serif; color: #fff;
  background: linear-gradient(#d9591f, #9a2c10); border: 2px solid #ffd24a; text-shadow: 0 1px 2px #000;
  box-shadow: 0 3px 12px rgba(0,0,0,.6), 0 0 16px rgba(255,140,40,.5);
  opacity: 0; transition: opacity .2s, transform .2s; }
#heat-warn.show { opacity: 1; transform: translate(-50%, 0); }

/* Preview de cosmetic in tooltip (shop premium) — mic cadru cu caracterul + cosmeticul */
.cos-tip { width: 96px; margin: 0 auto 6px; padding: 4px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid #5a2a18; }
.cos-tip .cos-fig { max-width: 88px; }
.cos-tip .cos-plate { margin-top: 2px; }

/* Model de caracter in fereastra de inspect (jucatorul inspectat, cu gear + cosmetice) */
.inspect-box .inspect-fig { display: flex; align-items: center; justify-content: center; height: 96px; margin: 2px auto 8px;
  background: radial-gradient(60% 60% at 50% 55%, rgba(0,0,0,.35), rgba(0,0,0,.1)); border-radius: 10px; }
.inspect-box .inspect-fig img { height: 92px; image-rendering: pixelated; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }

/* Aura de preview mai "reala": glow pulsatoriu + inel subtire rotativ (nu doar gradient plat) */
.cos-auraFx { animation: cosAuraPulse 1.6s ease-in-out infinite; }
.cos-auraFx::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 2px solid currentColor; opacity: .35;
  animation: cosAuraSpin 3.2s linear infinite; }
@keyframes cosAuraPulse { 0%,100% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; } }
@keyframes cosAuraSpin { to { transform: rotate(360deg); } }

/* ============================================================================
   🎨 SKIN UI — texturi (pattern seamless tilat) peste elementele de interfata.
   Variabilele sunt puse pe :root de applyUiSkin() (ui.ts) din shared/data/uiskin.json.
   Editate din Studio -> Skin UI. Fara textura, `--skin-*` = none -> arata exact ca inainte.
   Culoarea plata de mai sus ramane baza; PNG-ul cu alpha se aseaza PESTE ea.
   Regulile stau la FINALUL fisierului intentionat: `background:` (shorthand) din regulile de baza
   reseteaza background-image, deci textura trebuie aplicata dupa ele ca sa castige in cascada.
   ============================================================================ */
/* ATENTIE la tinte: fundalul REAL al ferestrei nu vine din regulile vechi (.win-title/.win-body de la ~800).
   Blocul de la ~4300 le suprascrie: `.win .win-title` are placuta cu gradient, iar `.win .win-body` e
   TRANSPARENT (culoarea o da .win). Deci skinul trebuie pus pe selectoarele `.win ...` (specificitate 0,2,0),
   altfel n-ar aparea niciodata. Gradientul placutei e pastrat ca strat 2, sub textura. */
.win .win-title {
  background-image: var(--skin-title, none), linear-gradient(180deg, #33240f, #281a0c);
  background-size: var(--skin-title-size, 64px), auto;
  background-repeat: repeat, no-repeat;
}
:root.skin-body .win .win-body  { background-image: var(--skin-body);    background-size: var(--skin-body-size, 64px);    background-repeat: repeat; }
:root.skin-speech .npc-speech   { background-image: var(--skin-speech);  background-size: var(--skin-speech-size, 64px);  background-repeat: repeat; }
:root.skin-tooltip #tooltip     { background-image: var(--skin-tooltip); background-size: var(--skin-tooltip-size, 64px); background-repeat: repeat; }
:root.skin-slot .inv-slot, :root.skin-slot .sv-slot, :root.skin-slot .shop-slot, :root.skin-slot .bank-slot {
                  background-image: var(--skin-slot);     background-size: var(--skin-slot-size, 32px);    background-repeat: repeat; }
:root.skin-btn .rpg-btn         { background-image: var(--skin-btn);     background-size: var(--skin-btn-size, 48px);     background-repeat: repeat; }
/* butonul primar are skin propriu; :root.skin-btnPrimary bate regula de baza */
:root.skin-btnPrimary .rpg-btn.btn-accept { background-image: var(--skin-btnPrimary); background-size: var(--skin-btnPrimary-size, 48px); background-repeat: repeat; }
:root.skin-tabs .inv-tab        { background-image: var(--skin-tabs);    background-size: var(--skin-tabs-size, 48px);    background-repeat: repeat; }
/* Hotbar: placa are 5 straturi de background (4 gradiente radiale = niturile din colturi + placa liniara).
   Textura devine al 6-lea, DEASUPRA — restul trebuie repetate identic, altfel dispar niturile.
   background-size/repeat cer cate o valoare per strat, in aceeasi ordine. */
#hotbar {
  background-image: var(--skin-hotbar, none),
    radial-gradient(circle at 10px 10px, #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) 10px, #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at 10px calc(100% - 10px), #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #e6c47e 0 1.6px, #8a5f27 2px, transparent 3.4px),
    linear-gradient(#3a2717, #2a1c10 55%, #1d1309);
  background-size: var(--skin-hotbar-size, 64px), auto, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
/* sloturile din bara sunt tot sloturi de obiecte -> refolosesc textura `slot`, fara asset nou.
   Gradientul lor radial ramane dedesubt (da adancitura), textura vine peste. */
.hot-slot {
  background-image: var(--skin-slot, none), radial-gradient(circle at 50% 32%, #241813, #120b06);
  background-size: var(--skin-slot-size, 32px), auto;
  background-repeat: repeat, no-repeat;
}
/* .sv-tab are un gradient — care e tot un background-image. Il pastram ca al 2-lea strat, sub textura,
   altfel skinul i-ar sterge relieful. `none` e un strat valid, deci fara textura ramane doar gradientul. */
.sv-tab {
  background-image: var(--skin-tabs, none), linear-gradient(180deg, #33220f, #281a0c);
  background-size: var(--skin-tabs-size, 48px), auto;
  background-repeat: repeat, no-repeat;
}
.sv-tab.on {
  background-image: var(--skin-tabs, none), linear-gradient(180deg, #4e3824, #3a2818);
  background-size: var(--skin-tabs-size, 48px), auto;
  background-repeat: repeat, no-repeat;
}

/* Ecran de încărcare între hărți — apare la schimbarea hărții, dispare când texturile noi sunt gata */
#map-loading {
  position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #1a120b 0%, #0a0705 100%);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
  pointer-events: none;
}
#map-loading.show { opacity: 1; visibility: visible; pointer-events: auto; }
#map-loading .ml-box { text-align: center; }
#map-loading .ml-spinner {
  width: 48px; height: 48px; margin: 0 auto 18px; border-radius: 50%;
  border: 4px solid #3c2a1e; border-top-color: #e6c47e; animation: ml-spin 0.8s linear infinite;
}
@keyframes ml-spin { to { transform: rotate(360deg); } }
#map-loading .ml-txt { font-family: 'Cinzel', 'MedievalSharp', serif; font-size: 26px; color: #f0c860;
  font-variant: small-caps; letter-spacing: 1.5px; text-shadow: 0 2px 6px #000; margin-bottom: 6px; }
#map-loading .ml-sub { font-size: 13px; color: #9a8568; letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { #map-loading .ml-spinner { animation: none; } }

/* Jurnal: „cine te caută" pe cardul misiunii disponibile */
.qc-who { margin-top: 5px; font-size: 11.5px; color: #c9b48c; }
.qc-who b { color: #f0c860; }

/* ⛏💎 Ciocan & Daltă — minijocul filoanelor bogate */
#mg-overlay { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; background: rgba(8,5,3,.55); }
#mg-overlay .mg-box { position: static; max-width: none; }
#mg-overlay .mg-tip { font-size: 11.5px; color: #c9b48c; margin: 0 0 8px; max-width: 400px; }
#mg-cv { display: block; background: #120c07; border: 2px solid #4b382a; border-radius: 4px; cursor: crosshair; touch-action: none; image-rendering: pixelated; }
.mg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.mg-time { font-variant-numeric: tabular-nums; font-weight: 700; color: #d9c9a8; } /* tabular: nu tresare la 9→10 */
.mg-time.low { color: #ff6b5a; }
#mg-hits { font-size: 16px; letter-spacing: 2px; filter: drop-shadow(0 1px 2px #000); }

/* 🎣⚔ Duelul din adânc */
#fd-overlay { position: fixed; inset: 0; z-index: 8000; display: flex; align-items: center; justify-content: center; background: rgba(3,8,14,.5); }
#fd-overlay .fd-box { position: relative; max-width: none; }
/* scena 3D a duelului: canvasul e injectat de fish3d.js; barele/avertismentul stau peste el in DOM,
   iar .fd-flat (modulul 3D n-a putut fi incarcat) tine minijocul jucabil pe un fundal simplu */
/* inaltimea e plafonata de ecran: pe monitoare joase fereastra iesea sub marginea de jos si se taia */
.fd-stage { position: relative; width: 560px; height: min(340px, 46vh); max-width: 84vw; border: 2px solid #35506b; border-radius: 4px;
  overflow: hidden; cursor: pointer; touch-action: none; user-select: none; background: #06131f; --f3-tension: 0; }
.fd-stage.fd-flat { background: linear-gradient(#1d4e6b, #0d2b44 50%, #050d18); }
/* canvasul e adaugat de fish3d.js DUPA barele din DOM, deci fara z-index le-ar acoperi (ambele absolute) */
.fd-stage .f3-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
/* firul intins = rama rosie care pulseaza; e semnalul periferic ca esti pe muchie */
.fd-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 40px rgba(255,60,50,.9); opacity: calc(var(--f3-tension) * var(--f3-tension)); transition: opacity .1s; }
.fd-stage[data-ph="2"]::after { box-shadow: inset 0 0 60px rgba(255,60,50,.95); }
.fd-bar { position: absolute; z-index: 2; left: 12px; right: 12px; height: 14px; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.14); pointer-events: none; }
/* umplerea e mereu pe toata latimea si se scaleaza pe X (vezi comentariul din ui.ts) */
.fd-bar i { display: block; height: 100%; width: 100%; border-radius: inherit;
  transform: scaleX(0); transform-origin: left center; transition: transform .06s linear; }
.fd-bar span { position: absolute; left: 2px; top: 13px; font-size: 10px; letter-spacing: .5px; text-shadow: 0 1px 2px #000; }
.fd-bar .fd-pct { font-weight: 900; font-size: 11px; color: #fff; }
.fd-ten { top: 12px; border-color: rgba(255,120,110,.45); }
/* reper la 70%: sub el firul e doar intins (tragere normala), peste el esti pe cale sa-l rupi */
.fd-ten::after { content: ""; position: absolute; left: 70%; top: -3px; bottom: -3px; width: 2px;
  background: rgba(255,220,120,.75); border-radius: 1px; }
.fd-ten i { background: linear-gradient(90deg, #e2574f, #ff6b5e); }
.fd-ten i.hot { background: linear-gradient(90deg, #ff3b30, #ffd0a0); box-shadow: 0 0 12px #ff3b30; }
.fd-ten span { color: #ffb3ab; }
.fd-prog { bottom: 22px; border-color: rgba(120,220,120,.35); }
.fd-prog i { background: linear-gradient(90deg, #4e9c4e, #7ad97a); }
.fd-prog span { top: auto; bottom: 13px; color: #a9e9a9; }
/* TII APASAT: fara starea asta nu se vedea deloc ca tragi. Bara de captura se aprinde si pulseaza,
   iar rama primeste o lumina verde — semnal periferic ca actiunea ta chiar face ceva. */
.fd-stage.fd-hold .fd-prog { border-color: #9dfb9d; box-shadow: 0 0 14px rgba(120,240,120,.55); }
.fd-stage.fd-hold .fd-prog i { background: linear-gradient(90deg, #63c463, #b6ffb6); animation: fdReel .5s linear infinite alternate; }
.fd-stage.fd-hold .fd-reel { opacity: 1; transform: translateY(0); }
@keyframes fdReel { from { filter: brightness(1); } to { filter: brightness(1.45); } }
/* eticheta „TRAGI" apare doar cat tii apasat; in timpul fugii devine avertisment rosu */
.fd-reel { position: absolute; z-index: 2; left: 0; right: 0; bottom: 44px; text-align: center; pointer-events: none;
  font-size: 12px; font-weight: 900; letter-spacing: 2px; color: #b6ffb6; text-shadow: 0 2px 6px #000;
  opacity: 0; transform: translateY(6px); transition: opacity .12s, transform .12s; }
.fd-stage[data-ph="2"].fd-hold .fd-reel { color: #ff6b5e; }
.fd-warn { position: absolute; z-index: 2; left: 0; right: 0; top: 44px; text-align: center; font-weight: 900; font-size: 16px;
  letter-spacing: 1px; text-shadow: 0 2px 6px #000; pointer-events: none; color: #ffc83c; min-height: 20px; }
.fd-stage[data-ph="1"] .fd-warn { animation: fdWarn .18s linear infinite alternate; }
.fd-stage[data-ph="2"] .fd-warn { color: #ff6b5e; font-size: 19px; }
@keyframes fdWarn { from { opacity: .55; } to { opacity: 1; } }

/* 🤿 Scufundarea */
#fish-actions { position: fixed; left: 50%; bottom: 148px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 6px; }
#fish-actions button { padding: 7px 14px; font-size: 14px; white-space: nowrap; }
#fish-actions #fishinfo-btn { padding: 7px 10px; font-size: 16px; }
#dive-btn.on-cd { opacity: .5; cursor: default; filter: grayscale(.7); }

/* legenda permanenta din scufundare: comenzile stau pe ecran, nu doar in tutorialul de la prima data */
.dv-legend { position: absolute; left: 16px; bottom: 16px; display: grid; gap: 3px; font-size: 11.5px;
  font-weight: 600; letter-spacing: .3px; line-height: 1.5; opacity: .85; text-align: left; }
.dv-legend b { color: #9fe6ff; font-weight: 800; }
.dv-legend .warn { color: #ff9b90; }
.dv-legend .gold { color: #ffd76a; }
.dv-legend .deep { color: #8fb6cc; font-style: italic; }

/* tutorialul de la PRIMA scufundare (inainte de intrare, ca sa nu consume aer) */
#dv-tut-ov { position: fixed; inset: 0; z-index: 8100; display: flex; align-items: center; justify-content: center; background: rgba(3,8,14,.6); }
.dv-tut-box { max-width: 480px; }
.dv-tut-list { margin: 10px 0 14px; padding-left: 20px; display: grid; gap: 8px; font-size: 12.5px; line-height: 1.45; color: #e8d9b8; }
.dv-tut-list b { color: #ffd76a; }
.dv-tut-box button { width: 100%; }

/* 📖 panoul „Ce pot prinde aici" */
#fish-info-ov { position: fixed; inset: 0; z-index: 8100; display: flex; align-items: center; justify-content: center; background: rgba(3,8,14,.6); }
.fi-box { max-width: 560px; }
.fi-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 6px 0 10px; }
.fi-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .65; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.14); }
.fi-tbl td { padding: 5px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.fi-tbl .fi-num { text-align: right; white-space: nowrap; }
.fi-tbl tr.fi-rare td { color: #ffd76a; }
.fi-tbl tr.fi-legend td { color: #ff9de0; font-weight: 800; }
.fi-w { font-weight: 800; font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.fi-w0 { background: rgba(120,200,120,.18); color: #9fe09f; }
.fi-w1 { background: rgba(210,200,110,.18); color: #e6d98f; }
.fi-w2 { background: rgba(255,150,80,.18); color: #ffb07a; }
.fi-w3 { background: rgba(255,70,60,.2); color: #ff8a7a; }
.fi-ms { font-size: 10.5px; opacity: .55; }
.fi-box button { width: 100%; margin-top: 4px; }
#dv-overlay { position: fixed; inset: 0; z-index: 7900; background: #02141f; display: flex; align-items: center; justify-content: center; }
#dv-overlay .dv-stage { position: absolute; inset: 0; touch-action: none; user-select: none; cursor: crosshair; }
#dv-overlay .dv-stage .f3-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* cu cat cobori mai adanc, cu atat marginile ecranului se inchid la culoare (--f3-dark = stratul) */
#dv-overlay .dv-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 180px rgba(0,10,20,calc(.35 + var(--f3-dark, 0) * .5)); }
.dv-exit { position: fixed; right: 16px; bottom: 16px; z-index: 3; }
.dv-hud { position: absolute; inset: 0; pointer-events: none; color: #dff4ff; font-weight: 700; z-index: 2;
  text-shadow: 0 0 10px #0af, 0 2px 4px #000; }
.dv-hud.dv-paused { opacity: .35; }
.dv-top { position: absolute; top: 14px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 26px; }
.dv-air { display: flex; align-items: center; gap: 8px; }
.dv-air-lbl { font-size: 11px; letter-spacing: 2px; }
.dv-air-bar { width: 220px; height: 12px; border-radius: 7px; background: rgba(0,20,35,.75); border: 1px solid #2c6a8c; overflow: hidden; }
.dv-air-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #2ea8d8, #9fe6ff); }
.dv-air-bar i.low { background: linear-gradient(90deg, #ff3b30, #ffb07a); animation: dvLow .3s linear infinite alternate; }
@keyframes dvLow { from { opacity: .5; } to { opacity: 1; } }
.dv-stat { font-size: 14px; letter-spacing: 1px; }
.dv-stat b { font-size: 22px; color: #ffe27a; }
/* selectorul de adancime: butoanele sunt singurul lucru clicabil din HUD (restul e pointer-events:none) */
.dv-depth { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 7px; pointer-events: auto; }
.dv-depth button { width: 40px; height: 34px; font-size: 15px; cursor: pointer; color: #dff4ff;
  background: rgba(4,26,40,.8); border: 1px solid #2c6a8c; border-radius: 5px; }
.dv-depth button:hover { background: rgba(20,70,100,.9); }
.dv-layers { display: grid; gap: 5px; }
.dv-layers i { display: block; width: 30px; height: 9px; border-radius: 3px; background: rgba(4,26,40,.8); border: 1px solid #2c6a8c; }
.dv-layers i.on { background: #7dfaff; box-shadow: 0 0 12px #7dfaff; }
.dv-layer-nm { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.dv-toast { position: absolute; left: 0; right: 0; bottom: 92px; text-align: center; font-size: 19px; letter-spacing: 1px;
  opacity: 0; transition: opacity .2s; }
.dv-toast.on { opacity: 1; }
.dv-toast.good { color: #9fe6ff; }
.dv-toast.rare { color: #ffd76a; font-size: 24px; }
.dv-toast.bad  { color: #ff6b5e; }
.dv-sum { position: relative; z-index: 4; min-width: 300px; }
.dv-sum-big { text-align: center; font-size: 30px; font-weight: 900; color: #ffe27a; text-shadow: 0 2px 6px #000; margin-bottom: 8px; }
.dv-sum-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; max-height: 240px; overflow: auto; font-size: 13px; }
.dv-sum-list li { display: flex; justify-content: space-between; padding: 3px 8px; background: rgba(0,0,0,.2); border-radius: 3px; }
.dv-sum-list .dv-none { justify-content: center; opacity: .6; }
.fd-tut { position: absolute; inset: 0; background: rgba(10,6,3,.88); display: flex; align-items: center; justify-content: center; border-radius: inherit; }
.fd-tut-in { max-width: 380px; padding: 14px 18px; font-size: 12.5px; color: #e8d9b8; }
.fd-tut-in b { color: #ffd76a; }
.fd-tut-in ol { margin: 10px 0; padding-left: 18px; display: grid; gap: 7px; }
.fd-tut-in button { width: 100%; margin-top: 4px; }
.mg-cryst { color: #9cc7ff; font-size: 13px; }
.buff-badge.heat { background: rgba(255,120,50,.16); border: 1px solid #ff7832; color: #ffb07a; }  /* rezistenta la caldura */
.buff-badge.def  { background: rgba(140,160,200,.16); border: 1px solid #8ca0c8; color: #bccbe6; }  /* dauna primita */
.buff-badge.mine { background: rgba(200,170,90,.16); border: 1px solid #c8aa5a; color: #e6cf8f; }   /* lovituri la filoane */

/* 🦝 Buzunarit: cele 3 minijocuri noi */
.pp-sack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; margin: 6px 0; background: radial-gradient(ellipse at 50% 30%, #3a2c1c, #201710 75%); border: 2px solid #4a3826; border-radius: 10px; }
.pp-slot { height: 62px; display: grid; place-items: center; font-size: 26px; background: #171008; border: 2px solid #4a3826; border-radius: 8px; cursor: pointer; filter: brightness(.55); transition: filter .15s, transform .1s; user-select: none; }
.pp-slot:hover { filter: brightness(.85); transform: translateY(-2px); }
.pp-slot.open { filter: none; cursor: default; background: #241a0e; animation: bbPop .25s ease-out; }
.pp-slot.rare { border-color: #c8a44a; box-shadow: 0 0 10px rgba(255,210,90,.35) inset; animation: ppGlint 1.6s ease-in-out infinite; }
@keyframes ppGlint { 0%,100% { box-shadow: 0 0 8px rgba(255,210,90,.25) inset; } 50% { box-shadow: 0 0 18px rgba(255,210,90,.6) inset; } }
.pp-susp { height: 12px; background: #14100b; border: 2px solid #4a3826; border-radius: 6px; overflow: hidden; margin-top: 4px; }
.pp-susp-fill { height: 100%; width: 0; background: linear-gradient(90deg, #b8a03a, #e07850); transition: width .25s; }
.pp-susp-fill.hot { background: linear-gradient(90deg, #e07850, #ff3b30); animation: ppGlint 0.5s linear infinite; }
.pp-sac-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.pp-susp-face { font-size: 22px; }
.pp-pend { flex: 1; text-align: left; color: #ffd76a; font-weight: 700; }
#pp-cv { display: block; margin: 8px auto 2px; border: 2px solid #4a3826; border-radius: 8px; touch-action: none; cursor: pointer; max-width: 100%; }
.buff-badge.pp { background: rgba(170,140,220,.16); border: 1px solid #aa8cdc; color: #cbb4ee; }  /* reset buzunarit */

/* 🎯 Roata radiala de actiuni (click-dreapta pe jucator) */
.ctx-wheel { position: fixed; z-index: 9400; filter: drop-shadow(0 8px 22px rgba(0,0,0,.75)); animation: cwIn .12s ease-out; }
.ctx-wheel canvas { display: block; cursor: pointer; }
.ctx-wheel .cw-name { position: absolute; left: 50%; top: 0; transform: translate(-50%, -4px); white-space: nowrap;
  background: #1a1209; border: 1px solid #6b5232; border-radius: 3px; padding: 2px 9px;
  font-size: 12px; font-weight: 700; color: #ffd76a; text-shadow: 0 1px 2px #000; pointer-events: none; }
@keyframes cwIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
.pp-why { font-size: 12.5px; color: #ffb07a; margin-top: 2px; padding: 0 8px 4px; }

/* 🍲 Coada de gătit (Bucătar / Cuptor) */
.cook-queue { margin-top: 12px; border-top: 1px dashed #4a3826; padding-top: 8px; }
.cq-title { font-size: 12.5px; color: #f0c040; font-weight: 700; margin-bottom: 6px; }
.cq-row { display: flex; gap: 8px; }
.cq-slot { width: 48px; height: 48px; position: relative; background: #171008; border: 2px solid #4a3826; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.cq-slot.busy { border-color: #c8912e; box-shadow: 0 0 8px rgba(224,160,60,.3) inset; }
.cq-slot .icimg { width: 34px; height: 34px; image-rendering: pixelated; }
.cq-slot .cq-time { position: absolute; right: 2px; bottom: 1px; font-size: 10px; font-weight: 700; color: #ffe9a0; text-shadow: 0 1px 2px #000; background: rgba(0,0,0,.55); padding: 0 3px; border-radius: 3px; }
.cq-slot .cq-empty { color: #5a4326; font-size: 22px; }
.cq-vip { margin-top: 6px; font-size: 11px; color: #c9a3e0; }
/* 📍 „Unde predau" pe cardul de misiune */
.qc-where { font-size: 11.5px; color: #c9b48c; margin-top: 4px; }
.qc-where b { color: #ffd76a; }
.qc-where .qc-where-map { color: #8a7658; }
.qc-where.here .qc-where-map { color: #8fd6a0; }
.cb-mat.cb-time { color: #9cc4ff; }  /* timp de preparare — distinct de materiale/Silver */
/* linia „din Renașteri (bază)" pe cardul de cale — explică de unde vine restul din totalul din Bonusuri Reborn */
.rb-base { margin-top: 6px; padding-top: 5px; border-top: 1px dashed #4a3826; font-size: 11px; color: #9ab8c8; }
.rb-base b { color: #cfe3f5; }

/* 🔗 Item atasat in chat (CTRL+click pe slot): jeton compact cu preview la hover */
.chat-item {
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  padding: 0 5px 0 3px; margin: 0 1px; border-radius: 3px; cursor: help;
  background: rgba(0, 0, 0, .35); border: 1px solid #6b5232;
  font-weight: 700; color: #ffd88a; text-shadow: 0 1px 2px #000;
}
.chat-item img { width: 15px; height: 15px; image-rendering: pixelated; }
.chat-item:hover { border-color: #e6c84a; background: rgba(0, 0, 0, .55); }

/* Nume de jucator din chat: click -> meniu cu Șoaptă */
.chat-name { cursor: pointer; }
.chat-name:hover { text-decoration: underline; filter: brightness(1.25); }
.chat-name-menu {
  position: fixed; z-index: 9300; min-width: 168px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px;
  /* .rpg-modal-win stilizeaza doar .win-title/.win-body — meniul n-are asa ceva, deci fundalul
     trebuie pus AICI, altfel iese complet transparent peste liniile de chat. */
  background: #251c15;
  border: 2px solid #6b5232;
  border-radius: 8px;
  box-shadow: 5px 5px 0 #120e0a, 0 10px 30px rgba(0, 0, 0, .8);
}
/* background-color explicit: fara el, textura de skin UI lasa butonul transparent (shorthand-ul
   `background:` din .rpg-btn reseteaza culoarea). Textura o pastram — asa arata tot restul UI-ului. */
.chat-name-menu .cnm-item { background-color: #33261a; border: 1px solid #6b5232; color: #e8dcc4; }
.chat-name-menu .cnm-item:hover { background-color: #45341f; border-color: #c9a35c; color: #fff; }
.chat-name-menu .cnm-head {
  font-weight: 700; color: #ffd88a; font-size: 12.5px;
  padding: 3px 6px 6px; border-bottom: 1px solid #4a3826; margin-bottom: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-name-menu .cnm-item { display: flex; align-items: center; gap: 7px; text-align: left; justify-content: flex-start; font-size: 12.5px; padding: 5px 8px; }
.chat-name-menu .cnm-ico { width: 16px; text-align: center; }

/* 🏅 Raritate la titluri — acelasi vocabular de culori ca la iteme */
.title-rar { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; margin-left: 5px; border: 1px solid currentColor; opacity: .9; }
.title-row.rar-common    .title-rar { color: #b8b0a0; }
.title-row.rar-uncommon  .title-rar { color: #3fbf3f; }
.title-row.rar-rare      .title-rar { color: #4d9fff; }
.title-row.rar-epic      .title-rar { color: #b055e8; }
.title-row.rar-legendary .title-rar { color: #ff9022; }
.title-row.rar-epic      { box-shadow: inset 2px 0 0 #b055e8; }
.title-row.rar-legendary { box-shadow: inset 2px 0 0 #ff9022; }
.title-row.locked .title-rar { opacity: .45; }

/* 📸 Confirmare auto-screenshot (colt dreapta-jos) */
#shot-toasts { position: fixed; right: 14px; bottom: 14px; z-index: 9400; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; pointer-events: none; }
.shot-toast {
  display: flex; align-items: center; gap: 9px; padding: 8px 12px;
  background: #251c15; border: 2px solid #6b5232; border-radius: 8px;
  box-shadow: 4px 4px 0 #120e0a, 0 8px 22px rgba(0,0,0,.6);
  color: #e8dcc4; font-size: 12.5px;
  animation: shotIn .22s ease-out;
}
.shot-toast.out { opacity: 0; transform: translateX(12px); transition: opacity .35s, transform .35s; }
.shot-toast .st-ico { font-size: 17px; }
.shot-toast .st-body { display: flex; flex-direction: column; line-height: 1.25; }
.shot-toast .st-body b { color: #ffd88a; }
.shot-toast .st-sub { font-size: 11px; color: #a89880; }
@keyframes shotIn { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

/* ---- Secțiuni pliabile de cosmetice (magazin + garderobă) ---- */
.cos-sect { margin: 6px 0; }
.cos-sect-head {
  width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer;
  background-image: none; background-color: #2a1f14; border: 1px solid #6b5232; border-radius: 6px;
  color: #ffd88a; font-size: 12.5px; font-weight: 700; padding: 6px 10px; text-align: left;
  letter-spacing: .3px;
}
.cos-sect-head:hover { background-color: #3a2b1a; border-color: #c9a35c; }
.cos-sect-head.closed { color: #c9b48a; }
.cos-sect-head .cs-arrow { width: 12px; color: #c9a35c; }
.cos-sect-head .cs-ico { font-size: 14px; }
.cos-sect-head .cs-label { flex: 1; }
.cos-sect-head .cs-count {
  background: #12100c; border: 1px solid #4a3826; border-radius: 9px;
  padding: 0 7px; font-size: 11px; color: #bca080; font-weight: 700;
}
.cos-sect-body { padding: 6px 2px 2px; }
.pshop-grid.cos-sub { margin: 0; }

/* 🏦 Depozitul de clan (tab in fereastra de clan) */
.gs-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12.5px; padding: 6px 8px; margin-bottom: 6px; background: rgba(0,0,0,.22); border-radius: 4px; }
.gs-head b { color: #ffd76a; }
.gs-quota { font-size: 11.5px; opacity: .9; }
.gs-log { margin-top: 10px; font-size: 11.5px; }
.gs-log summary { cursor: pointer; opacity: .8; padding: 4px 0; }
.gsl-row { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-bottom: 1px solid rgba(255,255,255,.06); }
.gsl-row.in  { color: #a9e9a9; }
.gsl-row.out { color: #ffc08a; }
.gsl-row b { color: #f4d79a; }
.gsl-t { margin-left: auto; opacity: .5; font-size: 10.5px; white-space: nowrap; }

.title-unlock { font-size: 11px; margin-top: 3px; color: #9fe6ff; }

/* misiune blocata de titlu: se vede, dar fara buton — conditia e la vedere ca sa devina obiectiv */
.qcard.qc-unavailable { opacity: .62; filter: grayscale(.35); }
.qc-lock { display: block; font-size: 11.5px; color: #9fe6ff; padding: 3px 0 0; }
.qc-lock .qc-lock-how { display: block; }
.qc-lock b { color: #ffd76a; }
.qc-lock-how { opacity: .65; font-size: 10.5px; font-style: italic; }

/* 🐾 nivelul companionului, in selectorul de pet */
.pet-lvl { margin-bottom: 10px; padding: 7px 9px; background: rgba(0,0,0,.22); border-radius: 5px; }
.pl-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.pl-top b { color: #ffd76a; }
.pl-bar { height: 8px; margin: 5px 0 6px; border-radius: 5px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c8873a, #ffd76a); }
.pl-hint { font-size: 11px; line-height: 1.4; }
.pl-hint b { color: #ffd76a; }

/* 🐾 cardul companionului ales (portret + statistici reale, scalate cu nivelul) */
.pet-card { display: flex; gap: 10px; align-items: center; padding: 9px; margin-bottom: 8px;
  background: rgba(0,0,0,.22); border: 1px solid #4a3826; border-radius: 5px; }
.pc-img { width: 64px; height: 64px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.pc-info { min-width: 0; }
.pc-name { font-weight: 800; color: #ffd76a; font-size: 14px; margin-bottom: 3px; }
.pc-stats { display: grid; gap: 2px; font-size: 12px; }
.pc-stats b { color: #e8d9b8; }
.pc-base { opacity: .5; font-style: normal; font-size: 11px; }
.pc-desc { font-size: 11px; margin-top: 4px; font-style: italic; }

.pet-swap { width: 100%; margin-bottom: 8px; }
.pet-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }

/* mini-inventarul de hrana: doar ce poate manca, cu valoarea nutritiva pe fiecare */
.pet-feed-head { font-weight: bold; color: #f0c040; margin: 10px 0 6px; font-size: 13px;
  border-top: 1px solid #4a3826; padding-top: 10px; }
.pet-feed-empty { font-size: 11.5px; margin: 0 0 6px; }
.pet-feed-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.pet-feed-slot { position: relative; cursor: pointer; padding: 0; }
.pet-feed-slot .pf-val { position: absolute; top: 1px; left: 0; right: 0; text-align: center;
  font-size: 9.5px; font-weight: 800; color: #ffd76a; text-shadow: 0 1px 2px #000;
  background: linear-gradient(rgba(0,0,0,.55), transparent); border-radius: 3px 3px 0 0; pointer-events: none; }
/* prea sarac pentru nivelul curent: se vede ca nu merge, dar ramane clicabil ca sa afli de ce */
.pet-feed-slot.pf-poor { opacity: .45; filter: grayscale(.7); }
.pet-feed-slot.pf-poor .pf-val { color: #ff9b90; }
/* 🐾 gusturi: preferatul e evidentiat verde (×1.5), cel detestat rosiatic (×0.5) */
.pet-feed-slot .pf-taste { position: absolute; bottom: 0; right: 1px; font-size: 11px; line-height: 1; pointer-events: none; text-shadow: 0 1px 2px #000; }
.pet-feed-slot.pf-fav  { border-color: #5ac06a; box-shadow: 0 0 6px rgba(90,192,106,.45); }
.pet-feed-slot.pf-fav  .pf-val { color: #8ff0a0; }
.pet-feed-slot.pf-hate { border-color: #a05a4a; }
.pet-feed-slot.pf-hate .pf-val { color: #d9a08a; }

/* 🎒 filtru de colectare: 3 comutatoare mari + sectiune pliata cu reglaje fine */
.pet-filter-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; cursor: pointer; }
.pet-filter-row .pf-hint { margin-left: auto; font-size: 10.5px; opacity: .5; font-style: italic; }
.pet-adv { margin-top: 8px; border-top: 1px solid #4a3826; padding-top: 8px; }
.pet-adv summary { cursor: pointer; font-size: 12.5px; color: #f0c040; padding: 2px 0; }
.pet-adv-body { padding: 6px 0 2px 6px; }
.pf-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .6; margin: 8px 0 3px; }
.pf-val-row { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 12px; }
.pf-val-input { width: 92px; padding: 3px 6px; font-size: 13px; }
.pf-note { font-size: 10.5px; line-height: 1.4; margin-top: 5px; font-style: italic; }

/* prag de marime pt potiuni (patru butoane care se selecteaza intre ele) */
.pf-size-row { display: flex; align-items: center; gap: 6px; margin: 3px 0 3px 22px; font-size: 12px; }
.pf-size-lbl { opacity: .7; margin-right: 2px; }
.pf-size-btn { padding: 2px 9px; font-size: 11px; font-weight: 700; background: rgba(0,0,0,.28);
  color: #cfc7b8; border: 1px solid #4a3826; border-radius: 3px; cursor: pointer; }
.pf-size-btn:hover { background: rgba(255,255,255,.06); }
.pf-size-btn.on { background: linear-gradient(#3a2f1e, #251c15); color: #ffd76a; border-color: #ffd76a; }

/* 🎮 icoane de controller (sprite injectat din /assets/pad-sprite.svg). Dimensiunea e proportionala
   cu font-size-ul contextului, ca sa se aseze cu textul din jur; la .hbm-k / .key sunt mai mari. */
.pad-ic { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em; }
.pad-combo { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.pad-combo .pad-plus { font-size: .78em; font-weight: 900; opacity: .55; margin: 0 1px; }
/* icoanele in bara de moduri (F1/F2/F3) si in hotbar sa fie usor mai mari, ca sa se citeasca */
.hbm-k .pad-ic, .key.pad-key .pad-ic { width: 1.3em; height: 1.3em; }