:root {
  --panel: linear-gradient(180deg, #2c4a78 0%, #1d335a 55%, #16284a 100%);
  --panel-dark: rgba(14, 24, 44, .92);
  --gold: #d9b45a;
  --gold-dark: #8a6a2a;
  --text: #f1ead2;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d140c; color: var(--text); font: 13px Verdana, Tahoma, sans-serif; user-select: none; }
/* every scrollbar of the game, in our UI's look: a dark sunken track with a thin blue edge and a golden bar with a
   dark outline and a light edge (like the windows' gold frames), no arrow buttons. 10 px (the bag's grid counts on it) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg, #060b16, #0d1830 50%, #060b16); border: 1px solid #2a3f66; border-radius: 6px; box-shadow: inset 0 0 4px #000; }
::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #060b16, #0d1830 50%, #060b16); }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: linear-gradient(90deg, #7a5418, #f1cf6e 45%, #c9953c) padding-box;
  box-shadow: inset 0 0 0 1px rgba(40, 24, 4, .9), inset 1px 1px 0 rgba(255, 240, 190, .45); min-height: 28px; }
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(180deg, #7a5418, #f1cf6e 45%, #c9953c) padding-box; min-width: 28px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #8f6420, #ffe08a 45%, #e2b04a) padding-box; }
::-webkit-scrollbar-thumb:active { background: linear-gradient(90deg, #a07428, #fff0b0 45%, #f0c25a) padding-box; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: transparent; }
/* browsers without ::-webkit-scrollbar: the same colours on their own thin bar */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #d8ad4c #0d1830; } }
canvas#game { position: fixed; inset: 0; display: block; }
canvas#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 1; }

.dim { color: #a9b4c8; font-size: 11px; }
.gold { color: #ffd76a; }
.right { float: right; }
.stat { color: #8fe38f; }

.panel { background: var(--panel); border: 2px solid var(--gold-dark); box-shadow: inset 0 0 0 1px #4d6fa8, 0 3px 10px rgba(0, 0, 0, .6); border-radius: 4px; }
.btn { background: linear-gradient(180deg, #5a7fc0, #34548f); color: #fff; border: 1px solid #1a2b4d; border-radius: 3px; box-shadow: inset 0 1px 0 #8fb0e6; padding: 5px 12px; font: bold 12px Verdana; cursor: pointer; text-shadow: 0 1px 0 #000; }
.btn:hover { filter: brightness(1.15); }
.btn.danger { background: linear-gradient(180deg, #b0503c, #7a2c20); box-shadow: inset 0 1px 0 #e08a70; }
.btn.big { font-size: 15px; padding: 9px 22px; }
.btn.close { display: block; margin: 10px auto 0; min-width: 110px; }
.btn.close.left { margin: 10px 0 0; } /* menus: the close / back button sits on the left under the grid */

/* ---------- loading / select */
#loading, #select { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 50;
  background: radial-gradient(ellipse at center, #22421f 0%, #0c160b 75%); }
#select { display: none; }
.logo { font: bold 54px Georgia, serif; color: #ffe29a; text-shadow: 0 0 18px #7ad36b, 0 3px 0 #3b2a0a, 0 5px 12px #000; letter-spacing: 2px; }
.logo small { font-size: 22px; color: #bfe8a8; }
.sub { color: #cfe3c0; font-size: 16px; }
.lbar { width: 320px; height: 14px; border: 2px solid var(--gold-dark); background: #111; border-radius: 3px; overflow: hidden; }
.lbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4bb04b, #b7f07a); }
#cards { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.card { width: 250px; padding: 12px; cursor: pointer; text-align: center; background: var(--panel); border: 2px solid var(--gold-dark); border-radius: 6px; transition: transform .15s; }
.card:hover { transform: translateY(-3px); }
.card.sel { border-color: #ffe06a; box-shadow: 0 0 18px rgba(255, 224, 106, .55); }
.card canvas { background: radial-gradient(ellipse at 50% 85%, #4a7d3a 0%, #22401e 60%, transparent 72%); border-radius: 6px; }
.card h3 { margin: 6px 0 4px; color: #ffe29a; }
.card p { margin: 0 0 8px; font-size: 11px; color: #cdd6e6; min-height: 44px; }
.skicons { display: flex; gap: 4px; justify-content: center; }
.skicons .ic { width: 30px; height: 30px; border: 1px solid #000; border-radius: 3px; }
#select .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
#name { font: 15px Verdana; padding: 8px 10px; border: 2px solid var(--gold-dark); border-radius: 3px; background: #0f1b30; color: #fff; width: 220px; }

/* ---------- HUD */
/* the unit frames, player and target: the SAME frame (2026-10-02, painted by gpt-image: art/ui_hud -> slice_hud.py -> assets/ui/hud_*.png): a tile with the level on a gold badge (the class
   tile for the player; the enemy / boss / npc tile for the target), a name plate, life and mana bars inside a gold frame; the player's also has the experience line and the buffs */
.uframe { position: fixed; top: 8px; width: 236px; z-index: 5; display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 7px; align-items: start; }
#pframe { left: 8px; }
#target { left: 256px; display: none; }
.uframe .ucls { position: relative; width: 58px; height: 58px; background: center / cover no-repeat; border-radius: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
#pframe .ucls { background-image: url(../assets/ui/cls_ranger_tile.png); }
#target .ucls { background-image: url(../assets/ui/enemy_tile.png); }
#target.boss .ucls { background-image: url(../assets/ui/boss_tile.png); }
#target.npc .ucls { background-image: url(../assets/ui/npc_tile.png); }
#target.foe .ucls { background-image: url(../assets/ui/cls_ranger_tile.png); } /* a foe of an arena match: the class tile of the foe (js/ui.js sets the other classes inline; the Ranger's is this one) */
#target.foe .uname { color: #ff9a8a; } /* ... and its name in red */
#target.nomp .bar.mp { display: none; }
.uframe .ucls::after { content: ''; position: absolute; inset: -3px; background: url(../assets/ui/hud_tileframe.png) center / 100% 100% no-repeat; pointer-events: none; }
.uframe .ucls b { position: absolute; right: -9px; bottom: -9px; z-index: 2; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font: bold 12px Verdana; color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; background: url(../assets/ui/hud_badge.png) center / 100% 100% no-repeat, radial-gradient(circle, #1a2750 0 55%, transparent 57%); }
#target.npc .ucls b { display: none; }
.uframe .ubox { min-width: 0; }
.uframe .uname { box-sizing: border-box; height: 23px; padding: 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: bold 13px/21px Verdana; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 13px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 13px / 0 stretch; }
.uframe .pbars { position: relative; margin-top: 1px; padding: 4px 5px; background: #04060c; border-radius: 3px; }
.uframe .pbars::after { content: ''; position: absolute; inset: -1px; border: 9px solid transparent; border-image: url(../assets/ui/hud_barframe.png) 26 / 9px stretch; pointer-events: none; }
.uframe .pbars .bar { height: 14px; margin: 0; border: none; border-radius: 0; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7); } .uframe .pbars .bar + .bar { margin-top: 1px; }
.uframe .bar span { font: bold 11px/14px Verdana; }
.uframe .bar.hp i { background: linear-gradient(180deg, #ff8a78, #e3281f 42%, #a5130e); }
.uframe .bar.mp i { background: linear-gradient(180deg, #7db0ff, #2563e8 45%, #17409f); }
#pframe .bar.xp { height: 4px; margin: 3px 6px 0; border: 1px solid #000; border-radius: 2px; }
#pframe #buffs { grid-column: 1 / -1; margin-top: 8px; }
#target.npc .pbars { display: none; } #target.npc .ubox { align-self: center; }
.bar { position: relative; height: 13px; background: #0b0f18; border: 1px solid #000; border-radius: 2px; margin-top: 3px; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; transition: width .15s; }
.bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.bar.hp i { background: linear-gradient(180deg, #ff6d5a, #b8211a); }
.bar.hp.shielded::after { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: calc(var(--ab, 0) * 100%); background: linear-gradient(180deg, #e2f3ff, #5aa8ff); box-shadow: 0 0 4px #7fc4ff; pointer-events: none; transition: width .15s; } /* Escudo Sagrado: the life it can still soak, as a share of the max life */
.bar.mp i { background: linear-gradient(180deg, #62a8ff, #1c4fb4); }
.bar.xp { height: 5px; }
.bar.xp i { background: linear-gradient(180deg, #ffe07a, #c09020); }
#buffs { display: flex; gap: 3px; margin: 4px 0 0 0; } /* under the frame */
.buff { width: 26px; height: 26px; border: 1px solid #7fdc6a; border-radius: 3px; position: relative; }
.buff.bad { border-color: #ff5b5b; }
/* no countdown on buffs: in its last 3 seconds a buff blinks (ui.js), then it's gone */
/* the minimap (top right): the painted frame (hud_mapframe.png, 192 x 205) over the canvas, the place name on the same plate as the unit frames */
#rightcol { position: fixed; right: 8px; top: 8px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 1px; }
#mmwrap { position: relative; width: 192px; height: 205px; }
#minimap { position: absolute; left: 13px; top: 23px; width: 166px; height: 164px; background: #2d6f8c; cursor: pointer; }
#mmwrap .mmframe { position: absolute; inset: 0; background: url(../assets/ui/hud_mapframe.png) center / 100% 100% no-repeat; pointer-events: none; }
#mmname { box-sizing: border-box; width: 192px; height: 23px; padding: 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: bold 12px/21px Verdana; color: #ffe9a6; text-shadow: 0 1px 0 #000, 0 0 2px #000;
  border: solid transparent; border-width: 0 13px; border-image: url(../assets/ui/hud_plate.png) 0 28 fill / 0 13px / 0 stretch; pointer-events: none; }
/* the chat on the game screen (Warspear style): the last 4 messages of every channel, the name in yellow and the text
   in its channel's colour, no box behind (a dark outline keeps them readable); a click opens the chat window */
#chat { position: fixed; left: 10px; bottom: 76px; width: 560px; max-width: 55vw; z-index: 4; font: 13px Verdana; line-height: 19px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 3px #000; }
#chat .cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .6s; }
#chat .cl.out { opacity: 0; } /* a message leaves the game screen 10 s after it came */
.clink { cursor: pointer; } .clink:hover { text-decoration: underline; } /* an item shown in a message: a click inspects it */
.cl .cn { color: #ffe066; }

#bottombar { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; z-index: 5;
  background: linear-gradient(180deg, #2a2f3a, #14171d); border-top: 2px solid #4b4f5a; }
#hotbar { display: flex; gap: 4px; }
.slot { width: 48px; height: 48px; position: relative; border: 2px solid #6b5327; border-radius: 4px; background: #121822; box-shadow: inset 0 0 6px #000; cursor: pointer; overflow: hidden; }
.slot .ic { position: absolute; inset: 0; background-repeat: no-repeat; }
.slot:hover { border-color: #ffd76a; }
.slot.noweapon .ic { filter: grayscale(1) brightness(.5); } /* attack skill unusable without a weapon */
.slot.armed { border-color: #fff27a; box-shadow: 0 0 10px #ffd24a, inset 0 0 10px rgba(255, 210, 74, .6); } /* skill waiting for a click */
/* recharge (skills, potions...): a yellow line filling up along the bottom of the slot, Warspear style */
.slot .cd { position: absolute; left: 2px; bottom: 2px; width: 0; max-width: calc(100% - 4px); height: 3px; border-radius: 2px; background: #ffd23a; box-shadow: 0 0 3px #ffb000; pointer-events: none; }
.slot .key { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: #c79a3a; color: #1a1206; font: bold 10px Verdana; padding: 0 4px; border-radius: 0 0 5px 5px; }
.slot .cnt { position: absolute; right: 2px; bottom: 0; font: bold 11px Verdana; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.slot.locked .ic { filter: grayscale(1) brightness(.4); }
.slot.nomana .ic { filter: saturate(.3) brightness(.7) sepia(.3) hue-rotate(180deg); }
/* the two bottom buttons: painted base (hud_btn.png) + painted icon (hud_icons.png: 0 = lightning bolt for Atalho, 1 = gem grid for Menu), both by gpt-image */
.menubtn { position: relative; width: 64px; height: 59px; padding: 0 0 4px; background: url(../assets/ui/hud_btn.png) center / 100% 100% no-repeat; border: none; border-radius: 0; color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.menubtn:hover { filter: brightness(1.2) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } .menubtn:active { transform: translateY(1px); }
.menubtn .hic { width: 30px; height: 30px; margin-top: 3px; background: url(../assets/ui/hud_icons.png) no-repeat; background-size: 60px 30px; background-position: calc(var(--i) * -30px) 0; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)); }
.menubtn small { margin-top: -1px; font: bold 9px Verdana; text-shadow: 0 1px 0 #000, 0 0 2px #000; }

#menu { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px; z-index: 20; display: none; }
#menu.open { display: block; }
#menu-char, #menu-sys, #menu-social { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 12px; z-index: 21; display: none; }
#menu-char.open, #menu-sys.open, #menu-social.open { display: block; }
/* attributes window (Warspear style): gold arrows around the page title, icon | yellow name | white value rows */
#w-attr { width: 340px; }
.apager { display: flex; align-items: center; gap: 6px; margin: 10px 0 8px; padding: 4px; border: 2px solid #8a6a2e; border-radius: 6px; background: linear-gradient(180deg, #2b4f8f, #1c3566); }
.aarrow { width: 44px; height: 37px; border: none; cursor: pointer; background: url(../assets/ui_arrow.png) center / contain no-repeat; }
.aarrow.r { transform: scaleX(-1); }
.aarrow:hover { filter: brightness(1.2); }
#attr-title { flex: 1; text-align: center; font: bold 15px Verdana; color: #fff; text-shadow: 0 1px 0 #000; position: relative; }
#attr-list { max-height: 330px; overflow-y: auto; padding: 2px 4px; }
.arow { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 14px; }
.arow .aic { width: 24px; height: 24px; flex: none; border-radius: 4px; background: url(../assets/bonus_icons.png) no-repeat; background-size: 576px 24px; }
.arow .aic.xp { background: url(../assets/ui/xp_tile.png) center / contain no-repeat; } /* experience: the yin-yang in the same framed tile as the other rows (gpt-image edit of the old star tile) */
.arow .anm { flex: 1; color: #ffe84a; }
.arow .aval { color: #fff; font-weight: bold; }
.arow .aval.cap { color: #ffcf4a; }
.mgrid { display: grid; grid-template-columns: repeat(3, 92px); gap: 8px; }
.mgrid button { height: 98px; position: relative; background: linear-gradient(180deg, #3f6bb0, #244478); border: 2px solid #1a2b4d; box-shadow: inset 0 0 0 1px #7ea4e0; border-radius: 4px; color: #fff; font: 11px Verdana; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; }
.mgrid button:hover { filter: brightness(1.2); }
.mgrid b { position: absolute; left: 4px; top: 2px; font-size: 10px; color: #cfe0ff; }
.mi { font-style: normal; font-size: 28px; margin-bottom: 4px; }
.mi.uic { --s: 52px; }
/* menu buttons: icon at a fixed height, label in a fixed 2-line box centred under it, clear of the bottom edge */
.mgrid button { justify-content: center; padding: 6px 4px 9px; line-height: 1.15; }
.mgrid button .mi { margin-bottom: 2px; }
.mgrid button .ml { width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; text-align: center; }
.mgrid .mgap { height: 98px; } /* an empty place in the grid (the Configurações e saída cross) */
/* main menu icons (gpt-image, assets/ui/menu_icons.png, 11 in a row): Personagem, Atividades, Interagir, Social, Loja
   Milagrosa, Arena, Relatar erro, Configurações, Conta, Sair, Contatos */
.nic { display: inline-block; flex: none; width: var(--s, 34px); height: var(--s, 34px); background: url(../assets/ui/menu_icons.png) no-repeat; background-size: calc(var(--s, 34px) * 11) var(--s, 34px); background-position: calc(var(--i) * var(--s, 34px) * -1) 0; }
.mi.nic { --s: 52px; }
/* painted UI icons (assets/ui_icons.png, 10 in a row): --i = index, --s = size */
.uic { display: inline-block; flex: none; width: var(--s, 34px); height: var(--s, 34px); background: url(../assets/ui_icons.png) no-repeat; background-size: calc(var(--s, 34px) * 20) var(--s, 34px); background-position: calc(var(--i) * var(--s, 34px) * -1) 0; }

/* ---------- windows */
.win { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); min-width: 300px; max-width: 94vw; max-height: 80vh; overflow: auto; padding: 0 12px 12px; z-index: 15; display: none;
  background: var(--panel); border: 2px solid var(--gold-dark); box-shadow: inset 0 0 0 1px #4d6fa8, 0 6px 22px rgba(0, 0, 0, .7); border-radius: 5px; }
.win.open { display: block; }
.win .title { margin: 0 -12px 10px; padding: 6px 12px; background: linear-gradient(180deg, #b0572a, #7a3314); border-bottom: 2px solid var(--gold-dark); font: bold 14px Verdana; color: #ffe8c0; text-shadow: 0 1px 0 #000; cursor: move; text-align: center; }
#w-bag { width: 318px; }
#w-shop { width: 330px; }
/* shopping: shop and bag side by side, the pair centred */
#w-shop.pair { left: calc(50% - 172px); }
#w-bag.pair { left: calc(50% + 172px); }
#w-loot { width: 318px; } /* centred on screen (default .win position) */
#w-loot .nm.rare { color: #c58cff; }
/* 5 rows (30 places) in view, the rest scrolls down; the grid reaches into the window's side padding so the 6
   columns and the scrollbar fit the window as it always was */
#bag-grid { display: grid; grid-template-columns: repeat(6, 48px); gap: 4px 3px; justify-content: center; max-height: 256px; margin: 0 -12px; overflow-x: hidden; overflow-y: auto; }
#bag-grid .slot.sel { border-color: #7fdcff; box-shadow: 0 0 8px #7fdcff; }
.slot.rare { border-color: #9a5ae0; }
#bag-actions { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 28px; align-items: center; text-align: center; }
.charbody { display: flex; gap: 12px; align-items: center; justify-content: center; }
.charbody #preview { order: 2; } /* slots on the left, hero on the right */
#preview { background: radial-gradient(ellipse at 50% 85%, #2f5b9a 0%, #1a3462 55%, #0c1830 100%); border-radius: 3px; }
/* character sheet: 3x3 slot grid on the left, portrait + stats on the right */
#w-char { width: 400px; }
#eq-slots { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(5, 56px); gap: 6px; }
#eq-extra { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #34507e; }
.eqcol { display: flex; flex-direction: column; }
.slot.eq { width: 56px; height: 56px; border-color: #8a6a2e; box-shadow: inset 0 0 8px #000, 0 0 0 1px #2a1d08; }
.slot.eq.locked { opacity: .35; cursor: default; }
.slot.eq .ph { position: absolute; inset: 4px; background: url(../assets/slot_icons.png) no-repeat; background-size: calc(var(--st, 13) * 48px) 48px; opacity: .55; } /* --st: the tiles of slot_icons.png, measured by ui.js */
.ph-head { background-position: 0 0 !important; } .ph-chest { background-position: -48px 0 !important; } .ph-hands { background-position: -96px 0 !important; }
.ph-legs { background-position: -144px 0 !important; } .ph-weapon, .ph-offhand { background-position: -192px 0 !important; }
.ph-cape { background-position: -240px 0 !important; } .ph-amulet { background-position: -288px 0 !important; }
.ph-bracelet1, .ph-bracelet2 { background-position: -336px 0 !important; } .ph-belt { background-position: -384px 0 !important; }
.ph-ring1, .ph-ring2 { background-position: -432px 0 !important; } .ph-costume { background-position: -480px 0 !important; }
.slot.eq .ph-offhand { transform: scaleX(-1); } /* second weapon: the sword mirrored, pointing the other way */
/* when slot_icons.png has the shield silhouette (tile 13, set on <body> by ui.js) the empty offhand shows it, not mirrored */
.slot-shield .slot.eq .ph-offhand { background-position: -624px 0 !important; transform: none; }
.ph-pet { background-position: -528px 0 !important; } .ph-minion { background-position: -576px 0 !important; }
.charside { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.charside .cls { color: #ffd84a; font-weight: bold; font-size: 13px; }
.portrait { padding: 3px; border: 2px solid #8a6a2e; border-radius: 4px; background: #0d1522; box-shadow: inset 0 0 8px #000; }
.portrait #preview { width: 150px; height: 150px; display: block; }
.charside .lvl { font-size: 14px; color: #e8eef8; }
#char-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 13px; }
#char-stats div, #char-vitals div { display: flex; align-items: center; gap: 5px; }
#char-vitals { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; padding-top: 6px; border-top: 1px solid #34507e; font-size: 13px; }
.sti { display: inline-block; width: 22px; height: 22px; background: url(../assets/stat_icons.png) no-repeat; background-size: 176px 22px; flex: none; }
/* item detail window (Warspear style) */
#w-item { width: 340px; padding: 0 0 10px; z-index: 17; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); } /* centred, stacked over the character window */
.istrip { display: flex; align-items: center; gap: 4px; padding: 8px 6px; background: linear-gradient(180deg, #2b4f8f, #1c3566); border-bottom: 2px solid #0e1d3a; }
.iarrow { width: 30px; height: 54px; border: none; background: url(../assets/ui_arrow.png) center / contain no-repeat; color: transparent; font-size: 0; cursor: pointer; }
#istrip-r { transform: scaleX(-1); }
.iarrow:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
#istrip { flex: 1; display: flex; gap: 6px; justify-content: flex-start; min-height: 58px; }
.itile { position: relative; width: 54px; height: 54px; border: 2px solid #8a6a2e; border-radius: 5px; background: radial-gradient(#3c5a8c, #1b2d52); cursor: pointer; box-shadow: inset 0 0 6px #000; }
.itile .ic { position: absolute; left: 1px; top: 1px; width: 48px; height: 48px; }
.itile.sel { border-color: #7fe0ff; box-shadow: 0 0 8px #4fc3ff, inset 0 0 6px #000; }
.itile.eq::after { display: none; content: 'E'; position: absolute; right: 3px; top: 1px; z-index: 2; font: bold 10px Verdana; color: #9f9; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.cntb { position: absolute; right: 3px; bottom: 2px; font: bold 11px Verdana; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; z-index: 1; }
#idetail .itype { color: #7dff4a; }
.psub { margin-top: 10px; }
.lvb { position: absolute; left: 2px; top: 1px; font: bold 11px Verdana; color: #ffe066; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; z-index: 1; }
#idetail { padding: 8px 12px 4px; min-height: 120px; }
.iname { font: bold 15px Verdana; color: #ff8cf0; margin-bottom: 8px; }
.iname.plain { color: #fff; }
.irow { display: flex; gap: 18px; }
.ilabel { color: #dfe8ff; font-size: 13px; margin: 8px 0 4px; }
.req { display: flex; align-items: center; gap: 8px; }
.lvtile { width: 42px; height: 42px; border: 2px solid #8a6a2e; border-radius: 5px; background: linear-gradient(180deg, #2c4a3e, #16261f); display: flex; align-items: center; justify-content: center; font: bold 18px Verdana; color: #fff; text-shadow: 0 0 3px #000; }
.lvtile.bad { color: #ff6a5a; }
.atype { color: #9fd0ff; font-size: 12px; font-weight: bold; }
.iparam { display: flex; align-items: center; gap: 6px; color: #6f6; font-size: 13px; }
.tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.btile { position: relative; width: 50px; height: 50px; border: 2px solid #8a6a2e; border-radius: 5px; background: linear-gradient(180deg, #c89a3c, #7a5418); display: flex; align-items: center; justify-content: center; }
.btile .sti { transform: scale(1.5); }
.btile b { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font: bold 12px/1 Verdana; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 3px #000; } /* sits just above the tile's bottom frame */
.socket { width: 50px; height: 50px; border-radius: 6px; background: url(../assets/ui/sockets.png) no-repeat; background-size: 100px 50px; position: relative; cursor: pointer; } /* empty: the faded crystal (1st) / rune (2nd) in the golden frame (gpt-image) */
.socket.rune { background-position: -50px 0; }
.socket:not(.full):not(.ro):hover { filter: brightness(1.2); }
.socket.full { border: none; border-radius: 6px; background: url(../assets/bonus_icons.png) no-repeat; background-size: 1200px 50px; } /* enchanted: the bonus tile */
.socket.full b { bottom: 6px; font: bold 12px/1 Verdana; color: #fff; }
.socket.open { border-color: #7fe0ff; box-shadow: 0 0 8px #4fc3ff; }
.socket.ro { cursor: default; } /* the link window's empty socket: only to look at */
.socket .ic { position: absolute; left: 3px; top: 3px; width: 40px; height: 40px; }
.socket b { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font: bold 11px Verdana; color: #7dff7d; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; }
.epick { margin-top: 8px; padding: 6px; border: 1px solid #34507e; border-radius: 4px; background: rgba(10, 20, 40, .6); }
.epick .ehint { font-size: 12px; color: #9fb4d8; margin-bottom: 5px; }
.eopt { display: flex; align-items: center; gap: 8px; padding: 3px; border-radius: 3px; cursor: pointer; font-size: 12px; }
.eopt:hover { background: rgba(127, 224, 255, .15); }
.eopt .ic { position: relative; flex: none; width: 32px; height: 32px; }
.ibtns { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px 0; }
.ibtns .btn { flex: 1; background: linear-gradient(180deg, #5b7fc8, #2c4a8a); }
.ibtns .btn:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
/* bag item actions: use / link to chat / destroy (Warspear style row above the bottom buttons) */
#iacts { display: none; gap: 8px; padding: 8px 12px 0; }
#w-item.bag #iacts { display: flex; }
#w-item.bag #item-go { display: none; }
#w-item.bag.picking #iacts { display: none; } /* choosing the item to enchant: CANCELAR / AVANÇAR */
#w-item.bag.picking #item-go { display: block; }
#iacts button { flex: 1; height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid #1a2b4d; border-radius: 4px; background: linear-gradient(180deg, #3f6bb0, #244478); box-shadow: inset 0 0 0 1px #7ea4e0; }
#iacts button:hover { filter: brightness(1.15); }
#iacts button.confirm { background: linear-gradient(180deg, #b0503c, #7a2c20); box-shadow: inset 0 0 0 1px #e08a70; }
#iacts button:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
.idesc { color: #dfe8ff; font-size: 13px; line-height: 1.4; margin-top: 6px; }
.iempty { color: #9fb4d8; font-size: 13px; padding: 20px 0; text-align: center; }
/* painted tiles: bonus (bonus_icons.png) and item kind / anvil / skin (type_icons.png), 8 and 10 in a row */
.btile { background: url(../assets/bonus_icons.png) no-repeat; background-size: 1200px 50px; border: none; border-radius: 6px; }
.btile.empty { background: rgba(10, 20, 40, .55); border: 2px solid #6a5424; }
.btile b, .socket b, .lvtile { color: #fff !important; }
/* the numbers on the bonus tiles and on the crystals / runes: a crisp black outline, easier to read */
.btile b, .socket b { text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, 0 0 3px #000; }
/* a window opened over another (an item's window, inspecting, an explanation, the bag over the market): the ones
   behind don't answer; a click on them is a click outside (one step back). Invisible, just under the top window */
#mblock { position: fixed; inset: 0; z-index: 16; display: none; }
body:has(#w-item.open, #w-bag.mkpick) #mblock { display: block; z-index: 16; }
body:has(#w-inspect.open) #mblock { display: block; z-index: 28; }
body:has(#w-info.open) #mblock { display: block; z-index: 29; }
.btile b.amp { color: #7dff4a !important; } /* raised by the amplification (+1 and up) */
.ktile { width: 50px; height: 50px; border-radius: 6px; background: url(../assets/type_icons.png) no-repeat; background-size: calc(var(--kt, 10) * 50px) 50px; flex: none; } /* --kt tiles (10 before the Paladin, 15 after): measured by ui.js */
.ktile.faded { opacity: .45; }
.req .ktile { width: 42px; height: 42px; border-radius: 5px; } /* same size as the level tile */
.twoh { margin-top: 3px; font: bold 11px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; } /* "Duas mãos" under the kind tile of a two-handed weapon */
.anvil { display: inline-block; width: 22px; height: 22px; background: url(../assets/type_icons.png) no-repeat; background-size: calc(var(--kt, 10) * 22px) 22px; background-position: -88px 0; border-radius: 3px; flex: none; }
.anvil.hglass { background-position: -132px 0; margin-left: 10px; }
.wdelay { color: #fff; }
.idur { display: flex; align-items: center; gap: 6px; font: bold 13px Verdana; margin-top: 5px; }
.broken { color: #ff5a4a; font: bold 12px Verdana; margin-left: 6px; }
.ienc { display: flex; gap: 22px; }
/* durability bar under item icons (item strip, bag, equipment) */
.dbar { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 5px; border: 1px solid #3a2a08; border-radius: 3px; background: #1a1206; overflow: hidden; z-index: 1; pointer-events: none; }
.dbar i { display: block; height: 100%; }
/* kind / attribute info (over the item window) */
#w-info { width: 340px; min-height: 300px; padding: 12px 14px 10px; z-index: 30; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); display: none; flex-direction: column; }
#w-info.open { display: flex; }
#w-confirm { width: 320px; padding: 12px 14px 10px; z-index: 18; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
#w-confirm .ihead { display: flex; align-items: center; gap: 10px; font: bold 15px Verdana; color: #ffe84a; }
#w-confirm .ic { width: 44px; height: 44px; flex: none; border: 2px solid #8a6a2e; border-radius: 5px; background-color: #1b2d52; }
#conf-body { font-size: 14px; color: #e8eef8; line-height: 1.45; margin: 12px 0 6px; }
#w-confirm .ibtns { padding: 8px 0 0; }
#w-confirm .ibtns .btn.danger { background: linear-gradient(180deg, #b0503c, #7a2c20); box-shadow: inset 0 1px 0 #e08a70; }
#w-info .ihead { display: flex; align-items: center; gap: 10px; font: bold 15px Verdana; color: #ffe84a; }
#w-info .ktile { width: 44px; height: 44px; }
#info-body { flex: 1; font-size: 14px; color: #e8eef8; line-height: 1.45; margin-top: 12px; }
#info-body .itype { color: #7dff4a; }
#w-info .ibtns { padding: 8px 0 0; }
.ktile.click, .btile.click { cursor: pointer; }
.btile.click:hover { filter: brightness(1.2); }
.ktile.click:hover { filter: brightness(1.2); }
#stats { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; font-size: 12px; }
#stats div:first-child { grid-column: 1 / -1; color: #ffe8a8; margin-bottom: 4px; }
.shrow { display: flex; gap: 10px; align-items: center; padding: 6px; margin-bottom: 5px; background: var(--panel-dark); border: 1px solid #34507e; border-radius: 3px; max-width: 460px; }
.shrow .ic { width: 44px; height: 44px; flex: none; border: 1px solid #000; border-radius: 3px; }
.shrow .ic { width: 40px; height: 40px; }
.shrow .nm { flex: 1; }
#dlg-text { max-width: 420px; line-height: 18px; margin-bottom: 10px; }
#dlg-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
#bigmap { display: block; border: 2px solid #1a2b4d; image-rendering: pixelated; max-width: 100%; }

#death { position: fixed; inset: 0; background: rgba(40, 0, 0, .45); display: none; align-items: center; justify-content: center; z-index: 30; }
#death .panel { padding: 18px 30px; text-align: center; }
#death h2 { margin: 0 0 6px; color: #ff9a8a; }
/* the fall of the hero plays under the screen: the veil and the panel come in only when the body has landed (1.05 s = js/mon_death.js DEATH.tiers[3].tDone; PVP_SPEC 7.7). pointer-events stay off until the panel shows; display none -> flex restarts the animation on every death */
#death { pointer-events: none; animation: deathveil .5s ease-out 1.05s both; }
#death .panel { animation: deathpanel .45s ease-out 1.05s both; }
@keyframes deathveil { from { background: rgba(40, 0, 0, 0); } to { background: rgba(40, 0, 0, .45); } }
@keyframes deathpanel { from { opacity: 0; transform: translateY(8px); pointer-events: none; } to { opacity: 1; transform: none; pointer-events: auto; } }
#tip { position: fixed; display: none; z-index: 60; max-width: 260px; padding: 7px 9px; background: rgba(10, 16, 30, .96); border: 1px solid var(--gold); border-radius: 4px; font-size: 12px; line-height: 16px; pointer-events: none; }
/* mouse pointer everywhere: the yellow pointing hand (gpt-image, assets/ui/cursor.png; hotspot on the fingertip) */
html, body, body * { cursor: url(../assets/ui/cursor.png) 1 1, auto !important; }
/* click feedback: gold ring with a hand (take / talk / enter / leave) or a sword (attack) on what you clicked */
.clickfx { position: fixed; left: 0; top: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; will-change: transform; pointer-events: none; z-index: 2; } /* still, under the HUD and windows */
/* anything open (menu, submenu, any window): the bottom bar keeps only its grey background (skills, Menu and Atalho
   hidden) */
body:has(#menu.open, #menu-char.open, #menu-sys.open, #menu-social.open, .win.open) #bottombar > * { visibility: hidden; }
body:has(#menu.open, #menu-char.open, #menu-sys.open, #menu-social.open, .win.open) #quick { display: none; }
/* the menus are just their buttons over the game (no blue panel behind) */
#menu.panel, #menu-char.panel, #menu-sys.panel, #menu-social.panel { background: none; border: none; box-shadow: none; }
/* Atalho: a column of quick buttons over the bottom-left corner + the additional action bar beside it */
#quick { position: fixed; left: 8px; bottom: 70px; display: none; align-items: flex-end; gap: 8px; z-index: 6; }
#quick.open { display: flex; }
#quick-col { display: flex; flex-direction: column; gap: 4px; }
#quick-col button { width: 66px; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: linear-gradient(180deg, #4a67a0, #2a3f6c); border: 2px solid #8a6a2a; border-radius: 5px; color: #fff; font: 10px Verdana; text-shadow: 0 1px 0 #000; }
#quick-col button:hover { filter: brightness(1.15); }
#extrabar { padding: 4px 6px 6px; background: rgba(20, 26, 40, .82); border: 1px solid #6b5327; border-radius: 5px; }
#extrabar .xtitle { text-align: center; font: 10px Verdana; color: #dfe8ff; text-shadow: 0 1px 0 #000; margin-bottom: 3px; }
#xslots { display: grid; grid-template-columns: repeat(5, 48px); gap: 4px; }
#xslots .slot { width: 48px; height: 48px; }
/* menus and windows open: a faint black shade over the game behind them */
#dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); z-index: 4; pointer-events: none; display: none; }
body:has(#menu.open, #menu-char.open, #menu-sys.open, #menu-social.open, .win.open) #dim { display: block; }
/* in combat (and 10 s after, the same time equipment stays locked): a soft red glow pulses around the player frame */
/* drop-shadow follows the frame's own outline (name plate, icon, bars), not a box around it */
@keyframes combatframe { 0%, 100% { filter: drop-shadow(0 0 0 rgba(230, 50, 40, 0)); } 50% { filter: drop-shadow(0 0 1.5px rgba(235, 45, 35, 1)) drop-shadow(0 0 1px rgba(235, 45, 35, 1)); } } /* a tight red edge, not smoky */
body.combat #pframe { animation: combatframe 1.4s ease-in-out infinite; }
/* loot window (same look as the item window): tile strip + details of the selected tile */
#w-loot { width: 340px; padding: 0 0 10px; }
#loot-r { transform: scaleX(-1); }
#loot-strip { flex: 1; display: flex; gap: 6px; min-height: 58px; }
/* Coletar tudo is an action, not a slot: its own warm gold button look */
#loot-strip .itile.lootall { border-color: #e2bc55; background: radial-gradient(circle at 50% 40%, #f2d27a, #b98a2c 60%, #6e4d14); box-shadow: inset 0 0 0 1px #fff2b8, inset 0 -3px 6px rgba(80, 50, 0, .6); }
#loot-strip .itile.lootall.sel { border-color: #7fe0ff; box-shadow: 0 0 8px #4fc3ff, inset 0 0 0 1px #fff2b8; }
#loot-strip .itile.lootall .ic { background: url(../assets/ui/loot_all.png) center / 44px 44px no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
#loot-detail { padding: 8px 12px 4px; min-height: 150px; color: #dfe8ff; font-size: 13px; }
#loot-detail .lreq { display: flex; flex-direction: column; align-items: flex-start; margin: 10px 0 0 150px; }
#loot-detail .lreq div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
#loot-strip .itile.empty { cursor: default; opacity: .55; }
/* drinking a potion: flask over the head pops in, tips over (being drunk) while the liquid inside drains, and fades */
.potfx { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; will-change: transform; }
.potfx .pot { position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; opacity: .85; transform-origin: 50% 30%; animation: potdrink 1s ease-in-out forwards; }
.potfx .pot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.potfx .pot .liq { animation: potdrain 1s linear forwards; } /* the liquid (45%..98% of the flask) empties from the top */
@keyframes potdrink {
  0% { transform: scale(.5); opacity: 0; } 15% { transform: scale(1.05); opacity: .85; } 25% { transform: scale(1) rotate(0deg); }
  65% { transform: rotate(-115deg); opacity: .85; } 100% { transform: rotate(-125deg) translateY(-6px); opacity: 0; } }
@keyframes potdrain { 0%, 25% { clip-path: inset(40% 0 0 0); } 80%, 100% { clip-path: inset(100% 0 0 0); } }
#loot-detail { color: inherit; font-size: inherit; }
/* bag view: potion cooling down -> the use button shows the seconds left */
#ia-use { position: relative; }
#ia-use[data-cd]::after { content: attr(data-cd); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 18px Verdana; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
/* ---- Bolsa (Warspear style) */
.bic { display: inline-block; width: var(--s, 52px); height: var(--s, 52px); background: url(../assets/ui/bag_icons.png) no-repeat; background-size: calc(var(--s, 52px) * 16) var(--s, 52px); background-position: calc(var(--i) * var(--s, 52px) * -1) 0; }
#bag-grid .slot.sel { border-color: #ffd76a; box-shadow: 0 0 6px #ffc93a, inset 0 0 6px #000; }
#bag-name, #sk-name { margin: 6px 0 4px; padding: 5px 8px; min-height: 18px; text-align: center; font: bold 13px Verdana; color: #ffe066; background: rgba(0, 0, 0, .35); border: 1px solid #6b5327; border-radius: 4px; }
#bag-qwe, #sk-qwe { display: flex; gap: 6px; }
#bag-qwe button, #sk-qwe button { flex: 1; height: 40px; position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid #1a2b4d; border-radius: 4px; background: linear-gradient(180deg, #3f6bb0, #244478); box-shadow: inset 0 0 0 1px #7ea4e0; }
#bag-qwe button b, #sk-qwe button b { position: absolute; left: 4px; top: 1px; font: bold 10px Verdana; color: #ffe066; text-shadow: 0 0 2px #000; }
#bag-qwe button:disabled, #sk-qwe button:disabled { filter: grayscale(1) brightness(.6); }
.bagbtns { display: flex; gap: 8px; margin-top: 6px; } .bagbtns .btn { flex: 1; }
#bag-menu { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 17; display: none; }
#bag-menu.open { display: block; }
#bag-menu .mgrid button { height: 98px; }
#bag-menu .mgrid button:disabled { filter: grayscale(.9) brightness(.55); cursor: default; }
#bag-menu .bic { --s: 46px; }
#w-repair, #w-hotkey { width: 330px; padding: 12px 14px; z-index: 18; text-align: center; }
.rtitle { font: bold 15px Verdana; color: #fff; margin: 4px 0 12px; }
.bigopt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 2px solid #1a2b4d; border-radius: 6px; background: linear-gradient(180deg, #4d7cc6, #2a4c8a); color: #fff; font: 13px Verdana; text-align: left; box-shadow: inset 0 0 0 1px #8fb4ee; }
.bigopt .bic { --s: 38px; flex: none; } .bigopt:disabled { filter: grayscale(1) brightness(.6); }
#w-disench { width: 300px; padding: 16px; z-index: 18; text-align: center; }
/* Mercado (Warspear style): its menu (at the Mercador Liran); the market window: the title with your gold, rows (an item tile with
   a count, the name, a line under it, a price box or a chevron to go deeper), VOLTAR / COMPRAR - MENU - AVANÇAR; the
   quantity and Anúncio panels over it (market_icons.png: search, my offers, the empty offer place; gpt-image) */
#w-mkmenu { width: 330px; padding: 0 0 12px; }
#w-mkmenu .title, #w-market > .title { margin: 0; }
.mkopt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 16px; border: none; border-bottom: 1px solid rgba(255, 255, 255, .07); background: none; color: #fff; font: 15px Verdana; text-align: left; cursor: pointer; }
.mkopt:hover { background: rgba(120, 160, 255, .14); }
.mkic { width: 44px; height: 44px; flex: none; background: url(../assets/ui/market_icons.png) no-repeat calc(var(--i) * -44px) 0 / 132px 44px; }
.mkfoot { padding: 12px 16px 0; }
#w-market { width: 390px; padding: 0 0 12px; }
.mkhead { display: flex; align-items: center; justify-content: space-between; }
.mkgold { display: flex; align-items: center; font: bold 13px Verdana; color: #fff; }
.mkgold .coin { width: 20px; height: 20px; }
#mk-list { height: 440px; overflow-y: auto; }
.mkrow { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: pointer; }
.mkrow:hover { background: rgba(120, 160, 255, .1); }
.mkrow.sel { background: rgba(120, 160, 255, .26); }
.mkrow .itile { width: 46px; height: 46px; flex: none; }
.mkrow .itile .ic { left: 1px; top: 1px; width: 40px; height: 40px; }
.mkmid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mkname { font: 14px Verdana; color: #ffe066; }
.mkname.rare, #mkf-name.rare { color: #e08cff; }
.mksub { font: 12px Verdana; color: #a9b4c8; }
.mksub.time { color: #fff; } .mksub.exp { color: #ff6a5a; }
/* the price: one golden pill on the right of the row, the coins inside it and the number in bold gold */
.mkprice { flex: none; display: flex; align-items: center; gap: 6px; min-width: 100px; padding: 4px 12px 4px 6px; border: 1px solid #c9a24a; border-radius: 16px;
  background: linear-gradient(180deg, #1a2946, #0a1224); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 -2px 4px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .4); }
.mkprice .coin { width: 22px; height: 22px; margin: 0; }
.mkprice b { flex: 1; font: bold 15px Verdana; color: #ffd94a; text-align: right; text-shadow: 0 1px 0 #000, 0 0 6px rgba(255, 190, 40, .25); }
.mkrow.sel .mkprice { border-color: #ffe98a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 8px rgba(255, 210, 90, .35); }
.mkrow .itile .ic.mkcat { background: url(../assets/ui/market_cats.png) no-repeat 0 0 / calc(var(--mc, 24) * 40px) 40px; } /* --mc category icons (24, then 29): measured by ui.js */
.mkrow .cntb { text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, 0 0 3px #000; } /* the count on a row's icon: a black outline */
.mkchev { width: 9px; height: 9px; flex: none; margin-right: 6px; border-top: 3px solid #ffe066; border-right: 3px solid #ffe066; transform: rotate(45deg); }
.mkrow.empty .mkname { color: #fff; }
.mkic.sack { position: absolute; left: 1px; top: 1px; width: 40px; height: 40px; background: url(../assets/ui/market_icons.png) no-repeat -80px 0 / 120px 40px; }
.mkempty { padding: 14px 16px; text-align: center; font: 13px Verdana; color: #dfe8ff; }
/* MENU of an offer of yours: the bag MENU's square buttons, in the middle (market_menu.png: take back, renew) */
#mk-menu { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 17; display: none; border-radius: 6px; }
#mk-menu.open { display: block; }
#mk-menu .mgrid { grid-template-columns: repeat(2, 92px); }
.mkmi { width: 46px; height: 46px; background: url(../assets/ui/market_menu.png) no-repeat calc(var(--i) * -46px) 0 / 92px 46px; }
#w-bag.mkpick { z-index: 17; } /* Ofertar um item: the bag over the market */
#mk-qty { position: absolute; inset: 0; z-index: 5; display: none; background: rgba(0, 0, 0, .35); } /* a click on it, beside the box: back */
#mk-qty.open { display: block; }
.mkqbox { position: absolute; left: 24px; right: 24px; top: 150px; padding: 14px 0 12px; background: var(--panel); border: 2px solid var(--gold-dark); border-radius: 6px; box-shadow: 0 10px 30px rgba(0, 0, 0, .75); }
.mkqt { text-align: center; font: 16px Verdana; color: #fff; }
.mkqrow { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 4px; }
#mk-q-r { transform: scaleX(-1); }
#mk-q-n { width: 130px; padding: 6px; border: 1px solid #c9a24a; border-radius: 4px; background: #0d1422; color: #fff; font: bold 16px Verdana; text-align: center; }
#mk-form { position: absolute; inset: 0; z-index: 5; display: none; background: rgba(0, 0, 0, .3); } /* over the list's tile marks (z-index 1); a click on it, beside the panel: back */
#mk-form.open { display: block; }
.mkfbox { position: absolute; left: 5px; right: 5px; top: 80px; bottom: 60px; display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 2px solid var(--gold-dark); border-radius: 6px; box-shadow: inset 0 0 0 1px #4d6fa8, 0 8px 24px rgba(0, 0, 0, .75); }
#mk-form .title { margin: 0; }
#mk-form .mkgold b { min-width: 96px; padding: 2px 10px; border: 1px solid #c9a24a; border-radius: 10px; background: #0d1422; text-align: right; } /* your gold in a dark box */
.mkf-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px 6px; }
#mkf-tile { flex: none; }
#mkf-name { font: bold 15px Verdana; color: #ffe066; }
.mkf-price { display: flex; align-items: center; gap: 8px; padding: 10px 16px 4px; font: 14px Verdana; color: #ffe066; }
.mkf-price .coin { width: 20px; height: 20px; margin: 0 0 0 auto; }
#mkf-price { width: 150px; padding: 6px 10px; border: 1px solid #c9a24a; border-radius: 10px; background: #0d1422; color: #fff; font: bold 15px Verdana; text-align: right; }
#mkf-avg { padding: 4px 16px 10px; text-align: center; font: 13px Verdana; color: #ffa07a; }
.mkf-sum { margin: 4px 14px; padding: 8px 12px; border: 1px solid rgba(201, 162, 74, .5); border-radius: 6px; background: rgba(10, 20, 40, .45); }
.mkf-sum div { display: flex; justify-content: space-between; padding: 3px 0; font: 14px Verdana; color: #fff; }
.mkf-sum b { color: #ffe066; }
#mk-form .ibtns { margin-top: auto; padding: 8px 12px 12px; }
/* Amplificação (Warspear's layout): the item and its name, Requer (the sphere) beside Nível (ten stars in two rows:
   gold the levels reached, grey the rest), Seguro, FECHAR / AMPLIFICAR */
#w-amp { width: 360px; padding: 0 0 12px; z-index: 19; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); }
#w-amp .title { margin: 0; } /* no side padding here: the title spans the window as it is */
.amp-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 4px; }
#amp-item { flex: none; }
#amp-name { font: bold 15px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; }
#amp-name.rare { color: #e08cff; }
.amp-mid { display: flex; justify-content: space-between; padding: 6px 14px 2px; }
#amp-sphere .itile.none { filter: grayscale(.8) brightness(.7); }
#amp-sphere .itile.none .cntb { color: #ff6a5a; }
#amp-stars { display: grid; grid-template-columns: repeat(5, 24px); gap: 3px; }
.astar { width: 24px; height: 24px; background: url(../assets/ui/amp_stars.png) no-repeat 0 0 / 48px 24px; } /* grey star / gold star (gpt-image) */
.astar.on { background-position-x: -24px; }
.amp-ins { padding: 4px 14px 0; }
.amp-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 0; border: none; background: none; color: #fff; font: 13px Verdana; text-align: left; cursor: pointer; }
.amp-opt .radio { width: 18px; height: 18px; flex: none; border: 2px solid #c9a24a; border-radius: 50%; background: #0d1422; box-shadow: inset 0 0 3px #000; }
.amp-opt.on .radio { background: radial-gradient(circle at 40% 35%, #c8ff9a, #34c23e 55%, #146b1c); }
.amp-opt:disabled { opacity: .5; cursor: default; }
.amp-opt em { font: bold 12px Verdana; color: #ffe066; }
#amp-msg { padding: 6px 14px 0; text-align: center; font: 12px Verdana; color: #ff8a7a; }
#amp-msg:empty { display: none; }
#w-amp.running .amp-opt, #w-amp.running #amp-sphere, #w-amp.running #amp-item, #w-amp.running #amp-btns { pointer-events: none; }
/* the forge (amplifying), a small modal over the Amplificação: the anvil on its stump, the hammer turning on its grip's
   end (JS sets the angle to the sound's hits) and striking the anvil's top, sparks and a warm glow on each hit
   (forge_anvil.png, forge_hammer.png, forge_sparks.png: gpt-image) */
#w-ampwork { width: 240px; min-width: 0; padding: 10px 12px 12px; z-index: 21; text-align: center; overflow: hidden; }
.forge { position: relative; height: 180px; margin: 0 auto 10px; width: 200px; }
#w-ampwork .ibtns { padding: 0; } /* CANCELAR: the modal's whole width, in red */
#w-ampwork .ibtns .btn.danger { background: linear-gradient(180deg, #e0553d, #9c2a1a); box-shadow: inset 0 1px 0 #ff9b82; }
.fglow { position: absolute; left: 20px; bottom: 30px; width: 170px; height: 140px; background: radial-gradient(closest-side, rgba(255, 150, 40, .35), transparent); opacity: .5; }
.fanvil { position: absolute; left: 46px; bottom: 0; width: 92px; height: 108px; background: url(../assets/ui/forge_anvil.png) center / contain no-repeat; }
.fhammer { position: absolute; left: 97px; bottom: 101px; width: 70px; height: 44px; background: url(../assets/ui/forge_hammer.png) center / contain no-repeat; transform-origin: 98% 48%; transform: rotate(34deg); }
.fsparks { position: absolute; left: 67px; bottom: 62px; width: 80px; height: 80px; background: url(../assets/ui/forge_sparks.png) center / contain no-repeat; opacity: 0; pointer-events: none; }
.forge.hit .fsparks { animation: fsparks .38s ease-out; }
.forge.hit .fanvil { animation: fshake .18s ease-out; }
.forge.hit .fglow { animation: fglow .45s ease-out; }
@keyframes fsparks { 0% { opacity: 1; transform: rotate(var(--r)) scale(calc(.35 * var(--s))); } 100% { opacity: 0; transform: rotate(var(--r)) scale(calc(1.25 * var(--s))); } }
@keyframes fshake { 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }
@keyframes fglow { 0% { opacity: 1; } 100% { opacity: .5; } }

.dbar2 { height: 26px; border: 2px solid #c9a24a; border-radius: 13px; background: #0d1422; overflow: hidden; margin-bottom: 10px; }
.dbar2 i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #7fd8ff, #1c8ad8); }
.btn.danger { background: linear-gradient(180deg, #e0553d, #9c2a1a); box-shadow: inset 0 1px 0 #ff9b82; }
.hkic { width: 44px; height: 44px; margin: 0 auto 4px; }
.hkname { color: #ffe066; font: bold 13px Verdana; }
/* assigning a hotkey: the bars stay visible over the dim and the target slots glow */
body.assigning #bottombar > * { visibility: visible !important; }
body.assigning #quick { display: flex !important; }
body.assigning #quick-col { visibility: hidden; }
body.assigning #bottombar, body.assigning #quick { z-index: 19; }
body.assigning .slot.hk { box-shadow: 0 0 0 2px #ffe066, 0 0 10px #ffd23a; cursor: pointer; }
/* parameters of an item: its binding */
.iparam .bic { --s: 20px; vertical-align: -4px; margin-right: 4px; }
.irestr { display: flex; align-items: center; gap: 4px; } /* Restrições: the padlock and Livre / Pessoal */
#bag-actions:empty { display: none; } /* nothing below the buttons outside a shop: the bag ends right under FECHAR / MENU */
/* the bag's Q (use) button shows the potion countdown like the item window's hand */
#bq-use[data-cd]::after { content: attr(data-cd); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: bold 16px Verdana; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }

/* Equipamento: selected slot + MENU (four actions in a diamond, like Warspear) */
#eq-slots .slot.sel, #eq-extra .slot.sel { border-color: #ffd76a; box-shadow: 0 0 6px #ffc93a, inset 0 0 6px #000; }
#w-char .bagbtns { margin-top: 8px; }
#eq-menu, #sk-menu { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 17; display: none; }
#eq-menu.open, #sk-menu.open { display: block; }
.eqdiamond { position: relative; width: 300px; height: 300px; }
.eqdiamond button { position: absolute; width: 98px; height: 98px; background: linear-gradient(180deg, #3f6bb0, #244478); border: 2px solid #1a2b4d; box-shadow: inset 0 0 0 1px #7ea4e0; border-radius: 4px; color: #fff; font: 11px Verdana; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 6px; }
.eqdiamond button b { position: absolute; left: 5px; top: 3px; font: bold 11px Verdana; color: #fff; }
.eqdiamond button .bic { --s: 46px; margin-bottom: 4px; }
.eqdiamond button:hover:not(:disabled) { filter: brightness(1.15); }
.eqdiamond button:disabled { filter: grayscale(.9) brightness(.55); cursor: default; }
.eqdiamond .d-top { left: 101px; top: 0; } .eqdiamond .d-left { left: 0; top: 101px; }
.eqdiamond .d-right { left: 202px; top: 101px; } .eqdiamond .d-bottom { left: 101px; top: 202px; }
/* menus over a window (bag MENU, equipment MENU, repair, disenchant, hotkey): a black shade over everything behind */
/* (a full-screen layer: the gaps between the menu's own buttons get shaded too) */
#mdim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 16; display: none; } /* a click on it: one step back */
body:has(#bag-menu.open, #eq-menu.open, #sk-menu.open, #w-skreset.open, #w-repair.open, #w-disench.open, #w-confirm.open, #w-amp.open, #mk-menu.open) #mdim { display: block; }
#bag-menu, #eq-menu { z-index: 17; } #w-disench, #w-confirm { z-index: 18; }
#w-repair { z-index: 22; } /* over the Amplificação and the bag over the market too (a damaged item is repaired first) */
body:has(#w-repair.open) #mdim { z-index: 21; } /* the shade between it and the windows behind */
#bag-menu, #eq-menu { border-radius: 6px; }
/* Painel Admin (the Thandor account): filter chips, the item grid (worn ones outlined green), the details */
#w-admin { width: 500px; }
#adm-count { font: 11px Verdana; color: #ffd98a; margin-left: 6px; }
.admrow { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; margin-bottom: 4px; font: 11px Verdana; color: #ffe8a8; }
.admrow > span { width: 42px; }
.admchip { padding: 2px 6px; font: 11px Verdana; color: #fff; background: linear-gradient(180deg, #3f6bb0, #244478); border: 1px solid #1a2b4d; border-radius: 3px; cursor: pointer; }
.admchip.on { background: linear-gradient(180deg, #d9a73e, #9a6e1e); border-color: #ffe08a; color: #1c1206; font-weight: bold; }
#adm-grid { display: grid; grid-template-columns: repeat(7, 48px); gap: 4px; justify-content: center; max-height: 160px; overflow-y: auto; margin: 6px -12px 6px; padding: 2px 0; }
#adm-grid .slot { position: relative; width: 48px; height: 48px; cursor: pointer; }
#adm-grid .slot.sel { border-color: #ffd76a; box-shadow: 0 0 6px #ffc93a, inset 0 0 6px #000; }
#adm-grid .slot.worn { outline: 2px solid #7dff4a; outline-offset: -2px; }
#adm-info { height: 150px; overflow-y: auto; padding: 6px 8px; background: rgba(0, 0, 0, .25); border: 1px solid #34507e; border-radius: 4px; }
#w-admin { max-height: 92vh; z-index: 31; } #w-admin .bagbtns .btn { padding-top: 6px; padding-bottom: 6px; } /* (above the death screen: CURAR / REVIVER works when dead) */
#w-admin .btn:disabled { opacity: .45; filter: grayscale(.6); cursor: default; }
#adm-info .itype { color: #7dff4a; }
#adm-info .iname { margin-bottom: 4px; }
/* Painel Admin, the other tabs: the tab strip, the lists of places / monsters (a row: name, level, state, buttons), the switches */
#adm-tabs { display: flex; gap: 3px; margin: 0 0 8px; }
#adm-tabs .admchip { flex: 1; padding: 5px 0; font-size: 12px; text-align: center; }
.adm-page { display: none; } .adm-page.on { display: block; }
.admlist { max-height: 300px; overflow-y: auto; margin: 4px 0 6px; padding: 2px; background: rgba(0, 0, 0, .25); border: 1px solid #34507e; border-radius: 4px; }
.admli { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font: 12px Verdana; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .07); cursor: default; }
.admli.sel { background: rgba(217, 167, 62, .28); }
.admli .nm { flex: 1; min-width: 130px; } .admli .nm small { display: block; color: #9fb4d8; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.admli .tag.none { visibility: hidden; } .admli .lv { width: 46px; color: #ffd98a; text-align: center; } .admli .st { width: 76px; font-size: 11px; color: #9f9; text-align: center; } .admli .st.dead { color: #f99; }
.admli .tag { width: 38px; font-size: 10px; text-align: center; color: #1c1206; background: #d9a73e; border-radius: 3px; } .admli .tag.mini { background: #e88a3c; } .admli .tag.boss { background: #e2503a; color: #fff; }
.admli .admchip { padding: 3px 7px; }
#adm-powers .pwrow { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); font: 12px Verdana; color: #fff; }
#adm-powers .pwrow .nm { flex: 1; } #adm-powers .pwrow .nm small { display: block; color: #9fb4d8; font-size: 10px; }
#adm-powers .pwgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
#adm-powers .pwgrid .btn { padding-top: 7px; padding-bottom: 7px; } #adm-powers .pwgrid .btn:last-child:nth-child(odd) { grid-column: span 2; }
/* Habilidades (Warspear style): the points left and Redefinir in the title bar, Classe / Sem classe, the skill
   tiles (level N/5 at the bottom right; the green arrow when a point can go there), the lock texts, Q / W / E
   (bag_icons.png 12-15, icons_passives.png, sk_up.png, skill_book.png: gpt-image) */
#w-skills { width: 330px; }
.sktitle { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 8px; }
#sk-pts { justify-self: start; min-width: 30px; padding: 2px 6px; font: bold 14px Verdana; color: #ffe066; text-align: center; background: rgba(0, 0, 0, .45); border: 1px solid #3a1a08; border-radius: 4px; box-shadow: inset 0 1px 3px #000; }
#sk-pts.has { color: #7dff4a; } /* points to spend */
#sk-reset { justify-self: end; width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; }
#sk-reset .bic { --s: 30px; display: block; }
#sk-reset:hover { filter: brightness(1.2); }
#skcat-name { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; font: 14px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #2c2c2c, #111); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 #4a4a4a; }
#sk-body { height: 222px; } /* Classe and Sem classe: the same height (the window doesn't jump) */
.sksec { display: flex; align-items: center; gap: 8px; margin: 2px 0 6px; font: bold 13px Verdana; color: #ffe8a8; text-shadow: 0 1px 0 #000; }
.sksec::before, .sksec::after { content: ''; flex: 1; height: 2px; background: linear-gradient(90deg, transparent, #c09a48); }
.sksec::after { background: linear-gradient(90deg, #c09a48, transparent); }
.skgrid { display: grid; grid-template-columns: repeat(5, 52px); gap: 6px; justify-content: center; margin-bottom: 6px; }
.sktile { position: relative; width: 52px; height: 52px; border: 2px solid #8a6a2e; border-radius: 5px; background: #1b2d52; cursor: pointer; }
.sktile .ic { width: 48px; height: 48px; border-radius: 3px; }
.sktile:hover { filter: brightness(1.15); }
.sktile.sel { border-color: #ffd76a; box-shadow: 0 0 7px #ffc93a; }
.sktile.locked .ic { filter: grayscale(1) brightness(.45); }
/* a weapon / armour passive: that item kind's own tile (its gold frame), as in the item window */
.sktile.kind { border: none; background: none; border-radius: 6px; }
.sktile.kind .ic { width: 52px; height: 52px; border-radius: 6px; }
.sktile.kind.sel { box-shadow: 0 0 0 2px #ffd76a, 0 0 8px #ffc93a; }
/* a class with more than 5 passives (the Paladin has 7): the SAME 52 px tiles as the skills, wrapped onto a second row, in a taller body (the user wants every square the same size) */
#sk-body.tall { height: 282px; overflow-y: auto; }
.sktile b { position: absolute; right: 2px; bottom: 0; font: bold 11px Verdana; color: #fff; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, 0 0 3px #000; }
.sktile.locked b { color: #b8b8b8; }
.sktile .up { position: absolute; right: -6px; top: -8px; width: 18px; height: 20px; background: url(../assets/ui/sk_up.png) center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); pointer-events: none; }
.sklock { margin: 0 4px; padding: 10px; text-align: center; font-size: 13px; line-height: 1.4; color: #dfe6f2; background: rgba(0, 0, 0, .28); border: 1px solid #34507e; border-radius: 4px; }
.skbook { height: 150px; margin: 4px 0 10px; background: url(../assets/ui/skill_book.png) center / contain no-repeat; }
#sk-menu .eqdiamond button { font-size: 11px; line-height: 1.15; text-align: center; }
/* Redefinir habilidades: the Livro do Esquecimento option (like the repair's) */
#w-skreset { width: 330px; padding: 12px 14px; z-index: 18; text-align: center; }
.bigopt .obook { width: 38px; height: 38px; flex: none; background: url(../assets/ui/oblivion_book.png) center / contain no-repeat; }
#info-body .sknext { color: #a9bddb; } #info-body .sknext b { color: #ffe066; font-weight: normal; } /* a skill's next level */
/* the FECHAR / VOLTAR under every menu: one bigger standard size */
.btn.close.left { min-width: 150px; padding: 9px 18px; font-size: 14px; }
.slot.cooling .ic { filter: brightness(.5) saturate(.55); } /* recharging: the icon half dimmed */
/* "which one?" list: several monsters / corpses under one click (a plain RPG popup: names only) */
#choose { position: fixed; z-index: 20; display: none; flex-direction: column; padding: 3px; min-width: 150px;
  background: rgba(14, 22, 40, .95); border: 1px solid #c9a24a; border-radius: 3px; box-shadow: 0 4px 12px rgba(0, 0, 0, .6); }
#choose.open { display: flex; }
#choose .chrow { padding: 5px 10px; text-align: left; font: bold 12px Verdana; color: #ff8a7a; background: none; border: none; border-radius: 2px; text-shadow: 0 1px 0 #000; }
#choose .chrow + .chrow { border-top: 1px solid rgba(201, 162, 74, .25); }
#choose .chrow:hover { background: rgba(255, 215, 110, .16); }
#choose .chrow em { font-style: normal; color: #ffe9a6; }

/* ---- world map (Warspear style) */
#w-map { width: 360px; padding: 0 0 10px; overflow: hidden; }
.mapsel { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.mapsel .iarrow { height: 30px; width: 26px; } #map-next { transform: scaleX(-1); }
#map-cont { flex: 1; text-align: center; font: bold 13px Verdana; color: #ffe9a6; padding: 4px; background: linear-gradient(180deg, #2b4f8f, #1c3566); border: 1px solid #0e1d3a; border-radius: 3px; text-shadow: 0 1px 0 #000; }
.mapview { position: relative; margin: 0 8px; border: 2px solid #8a6a2e; border-radius: 3px; background: #2d6f8c; }
#map-label { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 3px 6px; text-align: center; font: bold 12px Verdana; color: #fff; background: rgba(8, 14, 26, .7); text-shadow: 0 1px 0 #000; pointer-events: none; }
#bigmap { display: block; width: 100%; height: auto; cursor: grab; image-rendering: auto; }
.mapzoom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; background: rgba(8, 14, 26, .7); }
.mapzoom button { width: 30px; height: 26px; border: none; cursor: pointer; background: center / contain no-repeat; }
.zarrow { background-image: url(../assets/ui_arrow.png) !important; } .zarrow.up { transform: rotate(90deg); } .zarrow.dn { transform: rotate(-90deg); }
.zme { background-image: url(../assets/ui/aim_mark.png) !important; }
#map-qwe { display: flex; gap: 6px; margin: 8px 8px 0; }
#map-qwe button { flex: 1; height: 40px; position: relative; display: flex; align-items: center; justify-content: center; border: 2px solid #1a2b4d; border-radius: 4px; background: linear-gradient(180deg, #3f6bb0, #244478); box-shadow: inset 0 0 0 1px #7ea4e0; }
#map-qwe button b { position: absolute; left: 4px; top: 1px; font: bold 10px Verdana; color: #ffe066; text-shadow: 0 0 2px #000; }
#w-map .bagbtns { margin: 6px 8px 0; }
.mic { display: inline-block; width: var(--s, 30px); height: var(--s, 30px); background: url(../assets/ui/map_icons.png) no-repeat; background-size: calc(var(--s, 30px) * 4) var(--s, 30px); background-position: calc(var(--i) * var(--s, 30px) * -1) 0; }
.mic.big { --s: 46px; margin-bottom: 4px; }
#map-menu { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%); z-index: 17; display: none; }
#map-menu.open { display: block; }
#map-menu .mgrid { grid-template-columns: repeat(3, 98px); }
#map-menu .mgrid button { height: 98px; }
body:has(#map-menu.open, #w-ask.open) #mdim { display: block; }
/* a question with NÃO / SIM */
#w-ask { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 19; display: none; width: 380px; padding: 16px 18px 14px; text-align: center;
  background: linear-gradient(180deg, #25408a, #16295a); border: 2px solid #0d1a3a; border-radius: 6px; box-shadow: inset 0 0 0 1px #6f93cf, 0 8px 24px rgba(0, 0, 0, .7); }
#w-ask.open { display: block; }
#ask-text { font: 14px Verdana; color: #fff; line-height: 1.45; margin-bottom: 14px; text-shadow: 0 1px 0 #000; }
.askbtns { display: flex; gap: 18px; justify-content: center; }
.askbtns .btn { min-width: 110px; }
.btn.yes { background: linear-gradient(180deg, #58c24a, #2f7d26); box-shadow: inset 0 1px 0 #9ef08c; }

/* Configurações (Warspear style): the page selector in the orange title bar, then per option its name and a
   ◀ value ▶ selector (blue arrow buttons, greyed at the end of the range); CANCELAR / SALVAR */
#w-settings { width: 340px; }
#w-settings .title { display: flex; align-items: center; gap: 8px; padding: 7px 10px; }
#w-settings .title .iarrow { width: 30px; height: 30px; flex: none; } #w-settings .title .iarrow.flip { transform: scaleX(-1); }
.setpage { flex: 1; padding: 5px; font: bold 14px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #3b2610, #1e1307); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 #6e5226; }
.setlist { padding: 2px 4px 6px; }
.setrow { margin: 6px 0 14px; text-align: center; }
.setlbl { margin-bottom: 6px; font: 14px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
.setsel { display: flex; align-items: center; height: 38px; padding: 2px; background: linear-gradient(180deg, #1a2436, #0c121e); border: 2px solid #8a6a2e; border-radius: 4px; box-shadow: inset 0 0 8px #000; }
.setsel span { flex: 1; font: 15px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
.sarrow { width: 46px; height: 32px; flex: none; border: none; background: url(../assets/ui_arrow.png) center / 100% 100% no-repeat; cursor: pointer; }
.sarrow.sr { transform: scaleX(-1); }
.sarrow:hover:not(:disabled) { filter: brightness(1.2); }
.sarrow:disabled { filter: grayscale(1) brightness(.75); cursor: default; }

/* Bolsa (Warspear style): the name on the left of the title bar, the gold on the right with its painted icon
   (gpt-image, assets/ui/gold.png: stacks of gold coins) */
#w-bag .title.bagtitle { display: flex; align-items: center; justify-content: space-between; text-align: left; font-size: 15px; color: #ffe066; }
.bagtitle .gold { display: flex; align-items: center; font: bold 14px Verdana; color: #fff; }
.coin { display: inline-block; flex: none; width: 26px; height: 26px; margin: -3px 5px -3px 0; background: url(../assets/ui/gold.png) center / contain no-repeat; }
/* category selector: ◀ name ▶ in a gold-framed blue box; the list of every category drops below it (the one shown
   has the painted green check, assets/ui/check.png) */
.bagcat { position: relative; display: flex; align-items: center; gap: 4px; margin: 0 0 9px; padding: 4px; background: linear-gradient(180deg, #2b4f8f, #1c3566); border: 2px solid #8a6a2e; border-radius: 5px; }
.bagcat .iarrow { width: 42px; height: 30px; flex: none; } .bagcat .iarrow.flip { transform: scaleX(-1); }
#bagcat-name { flex: 1; height: 30px; position: relative; font: 14px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #2c2c2c, #111); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 #4a4a4a; }
#bagcat-name:hover { filter: brightness(1.2); }
#bagcat-list { position: absolute; left: 44px; right: 44px; top: calc(100% + 7px); z-index: 5; display: none; padding: 3px 0; background: rgba(36, 25, 16, .97); border: 1px solid #6b5327; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); }
#bagcat-list.open { display: block; }
.bcrow { position: relative; display: block; width: 100%; height: 27px; padding: 0 8px 0 30px; background: none; border: none; font: 14px Verdana; color: #fff; text-align: left; text-shadow: 0 1px 0 #000; }
.bcrow:hover { background: rgba(255, 255, 255, .08); }
.bcrow.on { background: linear-gradient(180deg, #3d4c68, #2a3650); }
.bcrow.on .chk { position: absolute; left: 7px; top: 4px; width: 19px; height: 19px; background: url(../assets/ui/check.png) center / contain no-repeat; }
.bagempty { grid-column: 1 / -1; }

/* Equipamento (Warspear style): the class symbol on the left of the title bar, the nickname in the middle with the
   guild under it (only when in one); life and mana under the attack / defence values */
#w-char .title.chartitle { display: flex; align-items: center; gap: 8px; padding: 5px 8px; }
.chartitle .ctile { width: 36px; height: 36px; flex: none; background: url(../assets/ui/cls_ranger_tile.png) center / cover; border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 0 0 1px #9fe070, 0 1px 2px rgba(0, 0, 0, .6); }
.chartitle .ctile.blank { visibility: hidden; }
.chartitle .cname { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 17px; }
#char-name { font: bold 16px Verdana; color: #ffe066; }
#char-guild { font: bold 12px Verdana; color: #fff; }
#char-guild:empty { display: none; }
.charside #char-vitals { flex-direction: column; align-items: flex-start; align-self: stretch; gap: 4px; margin-top: 6px; padding: 6px 6px 0; }

/* Missões (Warspear style): a header per city (the painted - / + button folds its group, the count in brackets), each
   quest a row with its painted "?" tile (assets/ui/quest_icons.png: grey = in progress, gold = done) and its name in
   yellow; the open quest shows its text under it */
#w-quests { width: 370px; }
#quest-list { max-height: 56vh; overflow-y: auto; }
.qgroup { margin-bottom: 6px; }
.qghead { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px 5px 6px; background: linear-gradient(180deg, #5d6f96, #3b4b6e); border: 1px solid #1a2b4d; border-radius: 3px; box-shadow: inset 0 1px 0 #93a8cf; font: bold 16px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; }
.qghead:hover { filter: brightness(1.1); }
.qtog, .qic { width: 26px; height: 26px; flex: none; background: url(../assets/ui/quest_icons.png) no-repeat; background-size: 104px 26px; }
.qtog { background-position: -52px 0; } .qgroup.folded .qtog { background-position: -78px 0; }
.qgname { flex: 1; text-align: left; }
.qgn { font: bold 13px Verdana; color: #fff; }
.qitem { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid rgba(126, 164, 224, .16); cursor: pointer; }
.qitem:hover { background: rgba(255, 255, 255, .06); }
.qitem.open { background: rgba(255, 255, 255, .09); }
.qic { background-position: 0 0; } .qitem.done .qic { background-position: -26px 0; }
.qname { flex: 1; font: 15px Verdana; color: #ffe84a; text-shadow: 0 1px 0 #000; }
.qprog { font: bold 12px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
.qitem.done .qprog { color: #8fff7a; }
.qtext { padding: 6px 10px 10px 44px; font-size: 12px; line-height: 17px; color: #e2e8f4; background: rgba(0, 0, 0, .18); border-bottom: 1px solid rgba(126, 164, 224, .16); }
.qnone { padding: 10px 4px; color: #a9b4c8; }

/* quest reward (the elder's dialog and Missões): loot tiles for the item, the gold (assets/ui/gold.png) and the
   experience (assets/ui/xp.png, yellow), the amount in the corner; a click on the item opens the inspect window;
   Cancelar missão under the quest's text */
.qrew { margin-top: 10px; }
.qrlabel { margin-bottom: 5px; font-size: 12px; color: #a9b4c8; }
.qrtiles { display: flex; gap: 8px; }
.itile .ic.goldic { background: url(../assets/ui/gold.png) center / 40px no-repeat; }
.itile .ic.xpic { background: url(../assets/ui/xp.png?v=3) center / 42px no-repeat; }
/* the inspect window (a quest reward's item): small, centred over the dialog / Missões it came from (ui.js), under
   the explanation window (#w-info) */
#w-inspect { width: 340px; padding: 0 0 10px; z-index: 29; box-shadow: 0 10px 30px rgba(0, 0, 0, .7); } /* over the full-screen chat too */
#insp-body { padding: 10px 12px 8px; }
#insp-strip { flex: 1; display: flex; gap: 6px; justify-content: flex-start; min-height: 58px; }
#insp-r { transform: scaleX(-1); }
#w-inspect .ibtns { padding: 6px 12px 0; }
#w-inspect .ibtns .btn { padding: 9px 6px; white-space: nowrap; } /* NO BATE-PAPO on one line */
#insp-body .itype { color: #7dff4a; }
.qcancel { margin-top: 10px; }

/* a quest from an NPC (Warspear style): the quest name in the title bar, the text, the Objetivo / Recompensa sections
   (a line across, a bigger white heading), the objective on a dark band with its check (grey; green once done) and
   its count on the right; FECHAR and a green ACEITAR */
#w-quest { width: 390px; padding: 0 12px 12px; }
#w-quest .title { font-size: 16px; color: #cfe8ff; }
.qdbody { max-height: 60vh; overflow-y: auto; overflow-x: hidden; margin: 0 -12px; padding: 2px 12px 0; }
#qd-text { font-size: 13px; line-height: 19px; color: #e8eef8; }
.qdsec { margin: 12px -12px 7px; padding: 8px 12px 0; border-top: 1px solid #3c5a8c; font: 17px Verdana; color: #fff; text-shadow: 0 1px 0 #000; }
.qdobj { display: flex; align-items: center; gap: 7px; margin-top: 4px; padding: 6px 8px; background: rgba(0, 0, 0, .32); font-size: 14px; color: #ffe84a; text-shadow: 0 1px 0 #000; }
.qdchk { width: 16px; height: 16px; flex: none; background: url(../assets/ui/check.png) center / contain no-repeat; filter: grayscale(1) brightness(1.7); }
.qdobj.done { color: #a6e88f; } .qdobj.done .qdchk { filter: none; }
.qdcount { display: flex; justify-content: space-between; padding: 6px 8px 2px 31px; font-size: 13px; color: #fff; }
#qd-rew .qrew { margin-top: 2px; }
#w-quest .bagbtns { margin: 10px 0 0; }
.btn.go { background: linear-gradient(180deg, #5bbf4f, #2f7a26); box-shadow: inset 0 1px 0 #a2e892; }

/* Social icons (gpt-image, assets/ui/social_icons.png, 8 in a row) */
.sic { display: inline-block; flex: none; width: var(--s, 34px); height: var(--s, 34px); background: url(../assets/ui/social_icons.png) no-repeat; background-size: calc(var(--s, 34px) * 8) var(--s, 34px); background-position: calc(var(--i) * var(--s, 34px) * -1) 0; }
.mi.sic { --s: 52px; }
/* the chat window (2026-10-02, painted by gpt-image: art/ui_hud p_chatA / p_chatB -> slice_chat.py -> assets/ui/chat_*.png): a centred window in the wood-and-gold frame, the channel's name on a banner
   across its top edge, one painted tab per channel (the open one lit with a gem in its colour under the name, a red gem with the count of new messages on the others), the messages on a dark panel
   (time, name, text; the rows alternate), the line to write in a painted field with the green send button, FECHAR and MENU as the HUD's blue buttons (MENU: Linkar item = the bag in a pick mode). Info is read only */
#w-chat { left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(1080px, 96vw); height: min(660px, 90vh); min-width: 0; max-width: none; max-height: none; padding: 38px 32px 28px; border: none; border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .75); z-index: 28; overflow: visible; background: var(--panel); }
#w-chat.open { display: flex; flex-direction: column; }
#w-chat::before { content: ''; position: absolute; inset: 0; border: 32px solid transparent; border-image: url(../assets/ui/chat_frame.png) 74 / 32px stretch; pointer-events: none; z-index: 3; }
body:has(#w-chat.open) #dim { background: rgba(3, 7, 18, .62); }
#chat-head { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); z-index: 4; box-sizing: border-box; min-width: 380px; height: 48px; padding: 0 6px; text-align: center; white-space: nowrap;
  font: bold 20px/46px Verdana; color: #ffe9a6; text-shadow: 0 2px 0 #000, 0 0 3px #000; border: solid transparent; border-width: 0 46px; border-image: url(../assets/ui/chat_banner.png) 0 80 fill / 0 46px / 0 stretch; pointer-events: none; }
#chat-tabs { flex: none; position: relative; z-index: 2; display: flex; gap: 3px; padding: 12px 2px 0; }
.ctab { position: relative; flex: 1 1 0; min-width: 0; max-width: 176px; height: 40px; padding: 0 0 2px; font: bold 13px Verdana; color: var(--c); text-shadow: 0 1px 0 #000, 0 0 2px #000; white-space: nowrap; cursor: pointer;
  background: none; border: solid transparent; border-width: 0 28px; border-image: url(../assets/ui/chat_tab.png) 0 72 fill / 0 28px / 0 stretch; }
.ctab:hover { filter: brightness(1.2); }
.ctab.on { border-image-source: url(../assets/ui/chat_tab_on.png); margin-bottom: -3px; z-index: 2; color: #fff; text-shadow: 0 1px 0 #000, 0 0 4px var(--c); }
.ctab.on::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 34px; height: 3px; transform: translateX(-50%); border-radius: 2px; background: var(--c); box-shadow: 0 0 6px var(--c); }
.cbadge { position: absolute; top: -10px; right: -2px; min-width: 24px; height: 24px; padding: 0 4px; box-sizing: border-box; background: url(../assets/ui/chat_badge.png) center / 100% 100% no-repeat; border: none; border-radius: 12px; color: #fff; font: bold 11px/24px Verdana; text-align: center; text-shadow: 0 1px 0 #000, 0 0 2px #000; }
#chat-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 2px; padding: 8px 10px; font: 15px/24px Verdana; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #0d1a38, #091229); border: 2px solid #4a3716; border-radius: 3px; box-shadow: inset 0 0 16px rgba(0, 0, 0, .8), 0 0 0 1px #000; }
#chat-list .cl { padding: 2px 8px; border-radius: 3px; word-wrap: break-word; }
#chat-list .cl:nth-child(even) { background: rgba(255, 255, 255, .045); }
#chat-list .cl.ch-info { border-left: 3px solid rgba(255, 106, 90, .55); }
#chat-list .ct { margin-right: 8px; font: 12px Verdana; color: #7f93bd; }
#chat-list .cn { font-weight: bold; }
#chat-list:empty::before { content: 'Nenhuma mensagem neste canal ainda.'; display: block; padding-top: 56px; text-align: center; font: italic 14px Verdana; color: #6d80a8; text-shadow: none; }
#chat-list::-webkit-scrollbar { width: 12px; } #chat-list::-webkit-scrollbar-track { background: #070d1e; border-radius: 6px; }
#chat-list::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #e7b94a, #a8741a); border: 1px solid #3a2608; border-radius: 6px; } #chat-list::-webkit-scrollbar-thumb:hover { filter: brightness(1.2); }
#chat-foot { flex: none; padding: 10px 2px 0; }
#chat-input { display: flex; align-items: center; gap: 8px; }
#chat-input input { height: 44px; box-sizing: border-box; padding: 0 4px; font: 15px Verdana; color: #fff; background: #08122a; border: solid transparent; border-width: 13px 16px; border-image: url(../assets/ui/chat_input.png) 30 36 / 13px 16px stretch; }
#chat-input input::placeholder { color: #6d80a8; }
#chat-input input:focus { outline: none; } /* no lit border while writing */
#chat-text { flex: 1; min-width: 0; }
#chat-to { width: 170px; display: none; } #w-chat.private #chat-to { display: block; }
#chat-send { width: 82px; height: 42px; flex: none; border: none; padding: 0; cursor: pointer; background: url(../assets/ui/send.png) center / 28px no-repeat, url(../assets/ui/chat_send.png) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#chat-send:hover { filter: brightness(1.18) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); } #chat-send:active { transform: translateY(1px); }
#w-chat.readonly #chat-foot { display: none; } /* Info: no line to write, the messages go down to the buttons */
#chat-bar { flex: none; position: relative; display: flex; justify-content: space-between; padding: 10px 2px 0; }
#w-chat #chat-bar .btn { min-width: 170px; height: 46px; padding: 0 10px 2px; box-sizing: border-box; font: bold 14px Verdana; color: #fff; text-shadow: 0 1px 0 #000, 0 0 2px #000; background: none; box-shadow: none; border: solid transparent; border-width: 14px; border-image: url(../assets/ui/hud_btn.png) 40 fill / 14px stretch; border-radius: 0; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#w-chat #chat-bar .btn:hover { filter: brightness(1.2) drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
#chat-pop { position: absolute; right: 2px; bottom: calc(100% + 58px); display: none; padding: 4px; background: rgba(36, 25, 16, .97); border: 2px solid #8a6a2a; border-radius: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .6); z-index: 5; }
#chat-pop.open { display: block; }
#chat-pop button { display: flex; align-items: center; gap: 9px; white-space: nowrap; padding: 8px 16px 8px 10px; font: 14px Verdana; color: #fff; text-shadow: 0 1px 0 #000; background: none; border: none; text-align: left; }
#chat-pop button:hover { background: rgba(255, 255, 255, .08); }
@media (max-width: 900px) { .ctab { border-width: 0 16px; font-size: 12px; } #chat-head { min-width: 260px; font-size: 17px; } }
body:has(#w-chat.open) #chat { visibility: hidden; }
body:has(#w-chat.open) #zone-banner, body:has(#w-chat.open) #toasts { display: none; } /* (the place name and the notices wait while the chat is open: they are in Info) */

/* simple notifications (kills, loot, quests, warnings: ui.js notify): at the top of the screen, in the middle, white
   text on a black band; up to 4, the newest at the bottom, each fading out after a few seconds; over the windows, under
   the full-screen chat */
#toasts { position: fixed; top: 60px; left: 50%; transform: translateX(-50%); z-index: 26; display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast { max-width: 70vw; padding: 5px 18px; font: 14px Verdana; color: #fff; text-shadow: 0 1px 0 #000; background: rgba(0, 0, 0, .75); border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: toastin .18s ease-out; transition: opacity .45s; }
.toast.out { opacity: 0; }
@keyframes toastin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- Talentos (Warspear style; js/talents.js, ui.js renderTalents). The tree scrolls inside the window on a navy
   field; frames and arrows are painted (assets/talents: gpt-image, art/talents/pack_talents.py) and their colour
   is the state: gold learned, green can be studied, red not reachable yet, grey not usable */
#w-talents { width: min(844px, 96vw); max-height: 94vh; padding: 0 12px 12px; }
.ttitle { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 8px; }
.ttitle > span:first-child { grid-column: 2; }
#tal-know { justify-self: end; display: flex; align-items: center; gap: 5px; padding: 1px 8px 1px 3px; font: bold 14px Verdana; color: #ffe066; background: rgba(0, 0, 0, .45); border: 1px solid #3a1a08; border-radius: 4px; box-shadow: inset 0 1px 3px #000; }
.tknow { display: inline-block; flex: none; width: 22px; height: 22px; vertical-align: middle; border-radius: 3px; background: url(../assets/talents/icons.png) -110px -44px / 132px 110px no-repeat; box-shadow: 0 0 0 1px #000; }
#tcat-name { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; font: 14px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #2c2c2c, #111); border: 1px solid #000; border-radius: 3px; box-shadow: inset 0 1px 0 #4a4a4a; }
#tal-note { display: none; margin: -4px 0 8px; padding: 5px; text-align: center; font: 13px Verdana; color: #ffe8a8; background: rgba(0, 0, 0, .35); border: 1px solid #34507e; border-radius: 3px; }
#tal-note.on { display: block; }
#tal-note.on + #tal-tree { height: min(568px, calc(90vh - 247px)); } /* (the note's row taken from the tree: the window keeps its height) */
#tal-tree { height: min(600px, calc(90vh - 215px)); overflow: auto; border: 2px solid #8a6a2e; border-radius: 4px;
  background: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 7px 7px, linear-gradient(180deg, #16284a, #122140); box-shadow: inset 0 0 18px rgba(0, 0, 0, .55); }
#tal-map { position: relative; margin: 0 auto; }
#tal-map > * { position: absolute; transform: translate(-50%, -50%); }
#tal-name { margin: 8px 0 2px; height: 26px; line-height: 26px; text-align: center; font: bold 14px Verdana; color: #fff; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #5c5244, #3a3228); border: 1px solid #1b140c; border-top-color: #c09a48; border-radius: 3px; }
.tgroup { transform: translate(-50%, 0) !important; white-space: nowrap; display: flex; align-items: center; gap: 8px; font: bold 13px Verdana; color: #ffe8a8; text-shadow: 0 1px 0 #000; }
.tgroup::before, .tgroup::after { content: ""; width: 90px; height: 2px; background: linear-gradient(90deg, transparent, #c09a48); }
.tgroup::after { background: linear-gradient(90deg, #c09a48, transparent); }
/* the class medallions */
.torb { width: 64px; height: 64px; transform: translate(-50%, 0) !important; cursor: pointer; text-align: center; }
.torb .img { display: block; width: 64px; height: 64px; background: center / contain no-repeat; border-radius: 50%; transition: filter .15s; }
.torb span { position: absolute; left: 50%; top: 69px; transform: translateX(-50%); white-space: nowrap; font: bold 12px Verdana; color: #dfe6f2; text-shadow: 0 1px 0 #000; }
.torb:hover .img { filter: brightness(1.15); }
/* (the view / selection ring on the medallion itself: the grey filter of a class that comes later doesn't dim it) */
.torb { border-radius: 50%; }
.torb.view:not(.chosen) { box-shadow: 0 0 0 2px rgba(255, 215, 106, .55); }
.torb.sel:not(.chosen) { box-shadow: 0 0 0 2px #ffd76a, 0 0 12px 3px rgba(255, 201, 58, .8); }
.torb.chosen .img { box-shadow: 0 0 0 3px #ffd76a, 0 0 14px 4px rgba(255, 215, 106, .75); }
.torb.chosen span { color: #ffe066; }
.torb.ready .img { animation: torbready 1.6s ease-in-out infinite; }
@keyframes torbready { 50% { box-shadow: 0 0 0 3px #5fd35f, 0 0 16px 5px rgba(95, 211, 95, .75); } }
.torb.soon .img { filter: grayscale(1) brightness(.6); }
.torb .lock { --i: 0; --s: 24px; position: absolute; left: 44px; top: 42px; filter: drop-shadow(0 1px 2px #000); pointer-events: none; }
.trail { height: 4px; transform: translate(0, -50%) !important; border-radius: 2px; background: #5a5a68; box-shadow: 0 1px 0 #000; }
.trail.on { background: linear-gradient(180deg, #ffd76a, #b07a24); }
/* the arrows (the painted chevron points down; rotated for the ones in a row) */
.tar { z-index: 2; width: 20px; height: 20px; background: url(../assets/talents/arrow.png) center / contain no-repeat; filter: grayscale(1) brightness(.62); pointer-events: none; }
.tar.on { filter: drop-shadow(0 1px 1px #000); }
.tar.r { transform: translate(-50%, -50%) rotate(-90deg) !important; }
.tar.l { transform: translate(-50%, -50%) rotate(90deg) !important; }
/* a talent: its icon inside the painted frame (rope; spiky for class talents; bigger for key talents), rank at the corner */
.tn { width: 52px; height: 52px; cursor: pointer; }
.tn .ic { position: absolute; left: 6px; top: 6px; width: 40px; height: 40px; border-radius: 2px; }
.tn .fr { position: absolute; inset: -3px; background: url(../assets/talents/frame_basic.png) center / 100% 100% no-repeat; pointer-events: none; }
.tn.lesser .fr, .tn.star .fr { inset: -10px; background-image: url(../assets/talents/frame_class.png); }
.tn.key { width: 58px; height: 58px; }
.tn.key .ic { left: 6px; top: 6px; width: 46px; height: 46px; }
.tn.key .fr { inset: -13px; background-image: url(../assets/talents/frame_class.png); }
.tn b { position: absolute; right: 1px; bottom: -1px; z-index: 1; font: bold 11px Verdana; color: #fff; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000, 0 0 3px #000; }
.tn:hover { filter: brightness(1.15); }
.tn.st-avail .fr { filter: hue-rotate(72deg) saturate(1.5) brightness(1.08); }
.tn.st-blocked .fr { filter: hue-rotate(-38deg) saturate(1.9) brightness(.95); }
.tn.st-grey .fr { filter: grayscale(1) brightness(.85); }
.tn.st-grey .ic { filter: url(#tgrey) contrast(1.15); } /* (a gamma curve, index.html #tgrey: dark paintings stay readable) */
.tn.st-grey b { color: #b8b8b8; }
.tn.sel::after { content: ""; position: absolute; inset: -5px; border-radius: 6px; box-shadow: 0 0 0 2px #ffd76a, 0 0 12px 3px rgba(255, 201, 58, .75); pointer-events: none; }
/* a branch banner: painted art in a frame whose colour is the branch's state */
/* a branch: its panel (the banner on top, its talents inside); the panel's edge and the banner's frame show its state */
.tpanel { border-radius: 8px; border: 2px solid #34466e; background: linear-gradient(180deg, rgba(10, 20, 42, .55), rgba(6, 14, 30, .7)); box-shadow: inset 0 0 14px rgba(0, 0, 0, .55); pointer-events: none; }
.tpanel.st-active { border-color: #c9a24a; box-shadow: inset 0 0 14px rgba(0, 0, 0, .5), 0 0 12px 1px rgba(255, 215, 106, .35); }
.tpanel.st-green { border-color: #3f8f3f; } .tpanel.st-red { border-color: #7a3a34; }
.tban { cursor: pointer; border-radius: 5px; border: 3px solid #8c8ca6; box-shadow: 0 2px 6px rgba(0, 0, 0, .6); background: #000; }
.tban .img { position: absolute; inset: 0; background: center / cover no-repeat; border-radius: 1px; }
.tban span { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 2px 3px; font: bold 12px Verdana; color: #fff; text-align: center; text-shadow: 0 1px 1px #000, 0 0 3px #000; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .8)); }
.tban.st-grey, .tban.st-other { border-color: #8c8ca6; }
.tban.st-grey .img, .tban.st-other .img { filter: grayscale(1) brightness(.7); }
.tban.st-red { border-color: #d0473a; }
.tban.st-green { border-color: #5fd35f; }
.tban.st-active { border-color: #ffd76a; box-shadow: 0 0 0 1px #6a4a10, 0 0 14px 3px rgba(255, 215, 106, .7); }
.tban:hover { filter: brightness(1.12); }
.tban.sel { outline: 2px solid #ffd76a; outline-offset: 2px; }
/* Estudar talento */
#w-tstudy { width: 330px; padding: 12px 14px; z-index: 19; text-align: center; }
.tsrow { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0 16px; }
.tsrow .tn { position: relative; flex: none; }
#ts-name { font: bold 14px Verdana; color: #ffe066; text-shadow: 0 1px 0 #000; text-align: left; }
.tscost, .tshave { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; font: bold 14px Verdana; color: #fff; }
.tscost .tslbl { color: #7dff4a; }
.tshave .tslbl { color: #cfd8e8; font-weight: normal; }
.tscost span, .tshave span { display: flex; align-items: center; gap: 4px; }
.tshave .short { color: #ff6a5a; }
.tcost { display: inline-flex; align-items: center; gap: 4px; color: #ffe066; }
.tcost .coin, .tscost .coin, .tshave .coin { width: 20px; height: 20px; margin: 0 0 0 4px; }
#info-body .tlv { color: #7dff4a; }
#tal-act:disabled, #ts-ok:disabled { filter: grayscale(1) brightness(.6); cursor: default; }

/* ---- entering a region / a city: its name across the top of the screen */
#zone-banner { position: fixed; left: 50%; top: 15%; transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 40; opacity: 0; white-space: nowrap; }
#zone-banner b { display: block; font: bold 34px Georgia, serif; color: #ffe6a0; letter-spacing: 1px; text-shadow: 0 2px 0 #3b2a0a, 0 0 14px rgba(0,0,0,.9), 0 0 3px #000; }
#zone-banner span { display: block; margin-top: 4px; font: bold 14px Verdana; color: #d8e6c8; text-shadow: 0 1px 0 #000, 0 0 8px rgba(0,0,0,.9); }
#zone-banner.on { animation: zoneIn 4.2s ease-out forwards; }
@keyframes zoneIn { 0% { opacity: 0; transform: translate(-50%, 8px); } 12% { opacity: 1; transform: translate(-50%, 0); } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) { #zone-banner b { font-size: 24px; } }

/* ---- ARENA / class rule (js/classrule.js, ui.js markNoUse): the RED BORDER. A piece of gear the class cannot use is framed in red on every
   item tile (bag, equipment, strips of the item / link / loot / reward windows, Mercado rows, admin grid, the inspect window): a red outer line,
   an orange highlight and a dark red inner band, like the Warspear frame. The inner bands are an ::after layer (the inset shadow of the tile
   itself hides under the icon). It wins over .rare / .eq / .sel / :hover; a selected tile keeps a light inner ring instead of a new colour */
.slot.nouse, .itile.nouse { border-color: #e0301f !important; border-radius: 6px; box-shadow: 0 0 0 1px #2a0a06, 0 0 7px rgba(224, 48, 31, .6) !important; }
.slot.nouse::after, .itile.nouse::after { content: ''; display: block; position: absolute; inset: 0; z-index: 2; border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 0 0 1px #ff9a5c, inset 0 0 0 3px #b8260f, inset 0 0 6px 3px rgba(60, 6, 0, .5); }
.slot.nouse.sel::after, .itile.nouse.sel::after { box-shadow: inset 0 0 0 1px #ff9a5c, inset 0 0 0 2px #bfeeff, inset 0 0 0 3px #b8260f, inset 0 0 6px 3px rgba(60, 6, 0, .5); }
.inouse { margin: 6px 0 0; padding: 3px 7px; border-left: 3px solid #e0301f; border-radius: 3px; background: rgba(150, 24, 12, .35); color: #ff6a58; font: bold 12px Verdana; text-shadow: 0 1px 0 #000; }

/* windows over windows (the arena's player card, actions grid and match pop-ups): .win.modal opens WITHOUT closing the window under it; the invisible
   #mblock layer under it takes the click meant for what is behind (a click on it closes the top modal, ui.js closeTopWindow). The two arena windows sit above the menus (20 / 21) */
.win.modal { z-index: 24; }
body:has(.win.modal.open) #mblock { display: block; z-index: 23; }
#w-arena, #w-arena-rank { z-index: 22; }

/* Inspecionar: the equipment window of another player, read only (ui.js showCharView): no MENU button, an empty slot is inert, the item window of a slot has no NO BATE-PAPO */
#w-char.view #eq-menu-btn { display: none; }
#w-char.view .slot.eq:has(.ph) { cursor: default; }
#w-char.view .slot.eq:has(.ph):hover { border-color: #8a6a2e; }
#w-inspect.ro #insp-chat { display: none; }