/* Native pixels extracted from the user's Tibia v7.10/Tibia.pic.
   Each component shares the same palette and bevels, including idle-only dialogs. */
:root{--client-surface:#414141;--client-light:#757575;--client-dark:#242424;--client-text:#bfbfbf;--client-texture:url('assets/client710/texture.png');color-scheme:dark}
body{color:var(--client-text);font:11px Verdana,Arial,sans-serif;background:var(--client-surface) var(--client-texture)}
button,input,select{border-radius:0;font:11px Verdana,Arial,sans-serif}
button,#game button,dialog button,#login button,#outfit-dialog button{background:#484848 var(--client-texture);border:1px solid;border-color:#777 #222 #222 #777;box-shadow:inset -1px -1px #333,inset 1px 1px #505050;color:#bfbfbf;text-shadow:1px 1px #222;transform:none}
button:hover,#game button:hover,dialog button:hover{filter:none;color:#eee}
button:active,#game button:active,button[aria-selected=true],#game .fight-controls button[aria-pressed=true]{border-color:#222 #777 #777 #222;box-shadow:inset 1px 1px #333;background-color:#363636;transform:none}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:1px dotted #ddd;outline-offset:-3px}
button:disabled{opacity:.5;cursor:default}
input,select,#login input:not([type=checkbox]),#character-list{background:#3f3f3f;color:#bfbfbf;border:1px solid;border-color:#242424 #777 #777 #242424;box-shadow:none}
label{color:#bfbfbf}
.panel,#game,#game .viewport,#game .sidebar,#game .panel,#game #log,dialog,.classic-dialog,.classic-dialog .dialog-body,#login .login-panel,#outfit-dialog{background:#414141 var(--client-texture);color:#bfbfbf;box-shadow:none}
.panel,#game .panel,dialog,.classic-dialog,#login .login-panel,#outfit-dialog{border:1px solid;border-color:#777 #252525 #252525 #777;border-radius:0;box-shadow:inset -1px -1px #555,inset 1px 1px #333}
.title,#game .title,#login .login-panel>.title,.classic-dialog>.title,#outfit-title,#hunt-controls>summary{background:#333 url('assets/client710/title.png') repeat-x;color:#bfbfbf;text-shadow:1px 1px #222;font:bold 11px/14px Verdana;margin:0;min-height:16px;height:16px;padding:0 3px;border:0;border-bottom:1px solid #242424}
dialog>.title,#login .login-panel>.title,#outfit-title{justify-content:center;text-align:center}
dialog>.title .close{position:absolute;right:2px;top:1px;width:13px;height:13px;font:11px/11px Arial;padding:0}
dialog::backdrop,#outfit-dialog::backdrop{background:transparent;backdrop-filter:none}
dialog .dialog-body,.classic-dialog .dialog-body{padding:14px}
dialog h3{font:bold 11px Verdana;color:#bfbfbf;margin:0 0 10px}
dialog p,.dialog-body p,.classic-dialog p{font:11px/1.4 Verdana;color:#bfbfbf;margin:8px 0 12px}
dialog .eyebrow{display:none}
dialog button{padding:3px 8px;min-height:20px}
#game .client{grid-template-columns:minmax(0,1fr) 176px;gap:2px;padding:0}
#game .sidebar{padding:2px 1px;gap:2px;border:1px solid;border-color:#777 #222 #222 #777;scrollbar-gutter:stable}
#game .viewport{border:1px solid;border-color:#222 #777 #777 #222}
#game .panel-content{scrollbar-width:auto}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:#333 var(--client-texture);border:1px solid #222}
*::-webkit-scrollbar-thumb{background:#555 var(--client-texture);border:1px solid;border-color:#888 #222 #222 #888}
*::-webkit-scrollbar-button{height:11px;background:#4a4a4a;border:1px outset #777}
#game #minimap-panel,#game #equipment-panel{border:0;box-shadow:none}
#game #minimap{border:1px inset #777;margin:2px auto;width:112px;height:108px}
#game #equipment-panel>.title{background:none;border:0;justify-content:flex-start;font-size:0;height:14px;min-height:14px}
#game #equipment-panel>.title .panel-toggle{font-size:11px}
#game .title button,#game .panel-toggle{width:12px;min-width:12px;height:12px;min-height:12px;line-height:10px;padding:0;font:11px/10px Arial}
#game .equipment-controls{grid-template-columns:106px 42px;gap:5px;margin:0 4px 4px;overflow:visible}
#game .equipment{gap:2px;grid-template-columns:repeat(3,34px);grid-template-rows:repeat(4,34px)}
#game .equip-cell,#game #inventory .item{width:34px;height:34px;border:1px solid;border-color:#252525 #777 #777 #252525;box-shadow:none;background:#393939 var(--client-texture);padding:0}
#game .slot-placeholder{width:32px;height:32px;inset:0;filter:none;opacity:1}
#game .equipped-item{background:none;width:32px;height:32px;inset:0}
#game .equipment-cap{font:bold 9px/10px Verdana;color:#bfbfbf}
#game .fight-controls button,#game .fight-controls button[aria-pressed=true]{border:0;box-shadow:none;outline:0;background:none;width:20px;height:20px;padding:0}
#game .equipment-buttons>button{font:9px Verdana;min-height:19px;padding:2px 0}
#game .equipment-buttons #hunt{min-height:19px}
#game .meter{height:11px;border:0;border-radius:0;background:#272727;box-shadow:1px 1px #666;margin-right:35px}
#game .meter i{border-radius:0;background:url('assets/client710/health.png') left center / 100% 11px no-repeat}
#game .mana .meter i{background-image:url('assets/client710/mana.png')}
#game .meter b{font:9px/11px Verdana;top:0;color:#bfbfbf}
#game .stat{height:14px;padding:1px 6px;gap:4px}
#game .stat>span{font:9px Verdana}
#game #inventory{grid-template-columns:repeat(4,34px);justify-content:start;gap:2px;padding:4px 7px}
#game #inventory .item span{font:bold 10px Verdana;color:#fff}
#game .skills summary,#game .skill-stat{font:11px/14px Verdana;color:#bfbfbf;padding:0 4px;min-height:14px}
#game .skills summary span{color:#bfbfbf}#game .skills details[open]>summary{background:#ffffff0a}
#game .skill-progress{height:4px;border:1px inset #666;background:#333;margin:2px 5px 4px}#game .skill-progress i{background:#b23e3e}
#game .client-actions{gap:3px;padding:2px 6px 4px}#game .client-actions button{font:9px Verdana;padding:3px 2px}
#game .panel-resizer,#chat-divider{background:#414141 var(--client-texture);border-top:1px solid #777;border-bottom:1px solid #222;height:4px}
#game .console{border:0;box-shadow:none;margin:0;padding:0 2px 2px}
#game .console-tabs{height:20px;padding:2px 0 0 14px;background:none;border:0;gap:0}
#game .console-tabs button{font:11px/14px Verdana;padding:0 12px;min-width:84px;height:18px;border-bottom:0;background:#414141 var(--client-texture);box-shadow:none}
#game .console-tabs button.active{color:white;background-color:#4d4d4d;border-top-color:#aaa}
#game #log{border:1px solid;border-color:#242424 #777 #777 #242424;margin:0;padding:3px 4px;font:bold 11px/14px Verdana}
#game #log .time{color:inherit}#game #log .combat{color:#eee}#game #log .loot{color:#00ff00}
#game #chat-form{padding:2px 0 0;gap:3px}#game #chat-form input{height:18px;background:#414141;box-shadow:none;font:11px Verdana}
#game #chat-form label{font:10px Verdana}#game #chat-form button{font:9px Verdana;height:18px;padding:0 4px}
#hunt-controls{background:#414141 var(--client-texture);border:1px solid;border-color:#777 #222 #222 #777;font:10px Verdana}
#hunt-controls>summary{font-size:10px;cursor:pointer;list-style:none}#hunt-controls>summary::-webkit-details-marker{display:none}
#hunt-controls>summary::before{width:11px;height:11px;font:11px/9px Arial;margin:0 4px 0 0;vertical-align:middle}
#hunt-controls label,#hunt-controls small{font-size:9px}#hunt-controls select{height:20px;padding:0}
.gold-total{font:10px Verdana;padding:3px 5px}
#hunt-dialog{width:430px}#hunt-dialog .dialog-body{padding:12px}
#hunt-options{display:block;max-height:48vh;overflow:auto;border:1px solid;border-color:#222 #777 #777 #222;background:#3f3f3f;padding:1px}
#hunt-options .hunt-choice{display:grid;grid-template-columns:32px minmax(0,1fr) 100px;align-items:center;gap:6px;width:100%;min-height:42px;padding:4px 6px;margin:0;border:0;border-bottom:1px solid #333;background:none;box-shadow:none;text-align:left}
#hunt-options .hunt-choice:hover:not(:disabled){background:#555}
#hunt-options .hunt-choice img{width:32px;height:32px;image-rendering:pixelated}
#hunt-options .hunt-choice strong{font:bold 11px Verdana;color:#bfbfbf}#hunt-options .hunt-choice small,#hunt-options .recommended{font:9px/13px Verdana;color:#aaa}#hunt-options .recommended em{display:block;font:9px Verdana;color:#bfbfbf}
#hunt-back{margin:4px}
#game #shop-dialog{background:#414141 var(--client-texture);inset:0 0 calc(var(--chat-height,112px) + 6px);border:1px solid #777}
#game #shop-dialog .title{font:11px/16px Verdana}#shop-dialog .dialog-body{max-width:620px;padding:12px}
#shop-categories,#shop-subcategories{gap:2px}#shop-categories button,#shop-subcategories button{font:10px Verdana;padding:3px 6px}
.trade-row{border-bottom:1px solid #555;font:11px Verdana;padding:3px 0}.trade-row button{font:9px Verdana;padding:3px 2px}
#buy-antidote-bp{margin:6px 0;font:11px Verdana;padding:5px 9px}#shop-bundle-note{font:10px Verdana}
#login .login-panel{width:240px}#login .login-body{padding:14px 14px 10px}#login .login-row{grid-template-columns:1fr 90px;gap:8px;font:bold 11px Verdana;margin-bottom:12px}
#login input:not([type=checkbox]){width:90px;height:17px;padding:1px 3px;margin:0;font:11px Verdana}
#login .create-row button{width:90px;font:8px Verdana;padding:2px}#login button{min-height:20px;font:9px Verdana;padding:3px 7px}
#login .login-panel>.title{height:17px;min-height:17px}#login #character-window{width:236px}
#login .remember-login{font:bold 11px Verdana}#login .login-buttons{gap:8px;margin-top:9px}#login .login-buttons button{min-width:43px}
#login .classic-main-menu{width:116px;padding:14px;gap:9px}#login .classic-main-menu button{font:9px Verdana;min-height:20px}
#character-list{height:146px;font:bold 11px Verdana}.account-status{font:bold 11px/14px Verdana}
#outfit-dialog{width:650px}#outfit-title{font:bold 12px/18px Verdana;height:19px}.outfit-instructions{font:bold 12px/16px Verdana!important;color:#bfbfbf!important}
#outfit-dialog button{font:11px Verdana;min-height:22px}.outfit-parts button{height:32px}#outfit-dialog #rotate-outfit{background:#414141 var(--client-texture);border:1px inset #777;box-shadow:none}
#outfit-dialog #outfit-palette button{background:var(--swatch);border:1px solid;border-color:#888 #222 #222 #888;box-shadow:none}
.outfit-dialog-footer{padding-top:12px;border-top:1px solid #777;box-shadow:0 -1px #222}.classic-outfit-content{padding:18px 20px 12px}
#world-context,#world-context button{background:#414141 var(--client-texture);color:#bfbfbf}#world-context button:hover{background:#666}
@media(max-width:600px){#game .client{grid-template-columns:minmax(0,1fr) 172px}#game .console-tabs button{min-width:0;padding:0 6px}#game .equipment-controls{gap:3px;margin-left:2px}#game .sidebar{scrollbar-gutter:auto}}

#game #log .all{color:#ffff00}#game #log .all .time{color:#ffff00}

#game .equipment-buttons #hunt{height:18px;min-height:18px;font:9px Verdana;padding:0 1px}#distance-setting:not([hidden]){display:flex;gap:4px;align-items:center;margin:4px}#distance-setting label{margin:0;flex:1}#distance-setting button{width:17px;height:17px;padding:0;font:11px Arial}#distance-value{min-width:10px;text-align:center}

/* Aldeia reference: two tight native-icon columns, three rows high. */
#game .equipment-buttons{display:grid;grid-template-columns:20px 20px;grid-auto-rows:min-content;gap:2px;align-content:start;align-items:start;justify-items:stretch}
#game .fight-controls{display:flex;flex-direction:column;gap:0;align-items:start;justify-content:start;align-self:start}
#game .fight-controls button{display:block;flex:0 0 20px;min-width:20px;min-height:20px;max-height:20px;margin:0}
#game .fight-controls img{display:block;width:20px;height:20px;max-width:none;object-fit:contain;image-rendering:pixelated}
#game #equipment-panel.minimized .equipment-buttons{display:grid;grid-template-columns:20px 20px 20px minmax(32px,1fr);grid-template-rows:20px 20px;gap:1px}
#game #equipment-panel.minimized .fight-controls{flex-direction:row}
#shop-modes{display:flex;gap:2px;margin:8px 0 12px;border-bottom:1px solid #777}
#shop-modes button{min-width:65px;font:bold 11px Verdana;padding:3px 10px;border-bottom:0}
#shop-items .trade-row{grid-template-columns:32px minmax(100px,1fr) 76px 84px}
#shop-items .trade-row:focus-visible{outline:1px dotted #bbb;outline-offset:-1px}
#shop-items .trade-row button{white-space:nowrap;min-height:20px}
#game #shop-dialog .dialog-body{max-width:620px}

/* Compact original-style window controls; drag headers to reorder. */
#game #backpack-panel>.title{justify-content:flex-start;gap:0}#game #backpack-panel>.title .panel-toggle{margin-left:auto}#game #close-backpack{position:static;margin-left:1px}#game .container-window>.title>span{display:flex;gap:1px;margin-left:auto}#game .container-window>.title button{margin:0}
.corpse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding:3px}.corpse-grid .item{position:relative;height:34px;padding:0}.corpse-grid img{width:32px;height:32px;image-rendering:pixelated}.corpse-grid .item span{position:absolute;bottom:0;right:0}.corpse-grid .empty{grid-column:1/-1}

#container-windows,#corpse-windows{display:contents}#game .sidebar>.panel:first-child>.title{display:flex}

#hunt-controls label:has(input[type=checkbox]){display:flex;align-items:center;gap:4px;text-align:left}#hunt-controls input[type=checkbox]{width:auto;margin:0;flex:none}

/* Independent container windows and compact automation. */
#game .container-window .panel-resizer{cursor:ns-resize;touch-action:none;min-height:6px}
#game .container-window .panel-content[hidden],#game .container-window .panel-resizer[hidden]{display:none}
#depot-panel .depot-count{display:block;padding:2px 4px;font-size:9px}
#auto-use-panel .auto-use-rule>label{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;max-width:100%;font-size:9px}
#auto-use-panel input[type=number]{width:34px;min-width:0;box-sizing:border-box;padding:1px}
#auto-use-panel .auto-use-rule>button{min-width:17px;padding:0 3px;margin-left:1px}
#auto-use-panel #auto-use-add{min-width:20px;padding:0 5px}
#training-controls .compact-auto{display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px}
#training-controls [hidden]{display:none!important}
#skills [id^="skill-info-"]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
#training-controls .compact-auto{justify-content:flex-start;text-align:left;padding:2px 4px;box-sizing:border-box;width:100%}#training-controls .compact-auto input{width:12px;min-width:12px;flex:0 0 12px;margin:0 3px 0 0}
/* Top automation strip leaves the inventory column for the classic client panels. */
#game #client-top{display:flex;align-items:center;gap:6px;height:28px;box-sizing:border-box;padding:2px 5px;background:#414141 var(--client-texture);border-bottom:2px groove #666;position:relative;z-index:30;font:11px Verdana}
#game .client{height:calc(100% - 28px)}
#game #client-top #auto-panel{display:flex;align-items:center;gap:5px;border:0;background:none;box-shadow:none;margin:0;padding:0}
#game #client-top #auto-panel>.title{background:none;border:0;height:auto;padding:0 4px}
#game #client-top details{position:relative;margin:0;padding:0;border:0;background:none}
#game #client-top summary{cursor:pointer;list-style:none;padding:2px 7px;height:20px;box-sizing:border-box;border:1px solid;border-color:#777 #222 #222 #777;background:#484848;color:#ccc;font:11px/14px Verdana}
#game #client-top summary::before{display:none}
#game #client-top .top-popover{position:absolute;top:24px;left:0;width:245px;max-height:65vh;overflow:auto;padding:7px;box-sizing:border-box;background:#414141 var(--client-texture);border:2px groove #777;box-shadow:2px 3px 5px #111}
#game #client-top .gold-total{margin:0 0 0 auto;padding:0;white-space:nowrap;border:0;background:none;font:11px Verdana}
#game #client-top #promotion-open{font:10px Verdana;min-height:20px;padding:1px 5px}
#game #client-top #auto-use-rules select{width:150px}
/* Keep container rows together when the window is taller than its contents. */
#game .container-grid{align-content:start;grid-auto-rows:34px;grid-template-columns:repeat(4,minmax(0,1fr))}
#game #inventory.container-grid{grid-template-columns:repeat(4,34px)}

#hunt-dialog{width:480px;max-width:96vw}#hunt-dialog .dialog-body{max-height:72vh;overflow:auto}#hunt-options .hunt-choice{grid-template-columns:32px minmax(0,1fr) 84px;align-items:start;padding:6px}#hunt-options .hunt-desc{display:block;font:10px/13px Verdana;color:#cfcfcf;margin:2px 0}#hunt-options .hunt-choice small{display:block}#loot-team{margin-left:6px}