/* ============================================================
   Tibia AI — styl UI (klimat klasycznego klienta)
   ============================================================ */

:root{
  --bg:        #232323;
  --panel:     #3b3733;
  --panel-lo:  #2a2724;
  --panel-hi:  #5a544c;
  --bevel-lo:  #171514;
  --bevel-hi:  #6d675d;
  --ink:       #c8bda6;
  --ink-dim:   #8d8571;
  --gold:      #d8b25a;
  --hp:        #b02020;
  --mp:        #2f5fd0;
  --xp:        #b0a020;
  --slot:      #221f1c;
  --font: "Lucida Console", "DejaVu Sans Mono", Consolas, monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  height:100%;
  background:#101010;
  color:var(--ink);
  font-family:var(--font);
  font-size:12px;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

body{
  background:
    radial-gradient(ellipse at 50% 0%, #2c2822 0%, #0d0c0b 70%);
}

.hidden{display:none !important;}

/* ---------- układ ---------- */
#app{
  display:flex;
  height:100vh;
  gap:6px;
  padding:6px;
  align-items:stretch;
  justify-content:center;
}

.game-col{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

#viewport{
  position:relative;
  background:#000;
  border:3px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  line-height:0;
  align-self:flex-start;
}

#game{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
  cursor:crosshair;
}

#overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
}

#tooltip{
  position:absolute;
  pointer-events:none;
  background:#0f0e0dee;
  border:1px solid var(--panel-hi);
  color:var(--ink);
  padding:3px 6px;
  font-size:11px;
  line-height:1.35;
  max-width:230px;
  z-index:40;
  white-space:pre-wrap;
}

/* ---------- hotbar ---------- */
#hotbar{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
}
.hot{
  width:38px; height:38px;
  background:var(--slot);
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:9px;
  color:var(--ink-dim);
  text-align:center;
  overflow:hidden;
}
.hot:hover{border-color:var(--gold);}
.hot .hk{
  position:absolute; top:0; left:2px;
  font-size:9px; color:var(--gold);
  text-shadow:1px 1px 0 #000;
}
.hot .hcount{
  position:absolute; bottom:0; right:2px;
  font-size:9px; color:#fff; text-shadow:1px 1px 0 #000;
}
.hot canvas{image-rendering:pixelated;}
.hot.cool::after{
  content:''; position:absolute; inset:0;
  background:#000a;
}

/* ---------- konsola ---------- */
#console-wrap{
  border:3px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  background:var(--panel-lo);
  display:flex; flex-direction:column;
  flex:1;
  min-height:110px;
}
#console{
  flex:1;
  overflow-y:auto;
  padding:3px 5px;
  line-height:1.4;
  font-size:11.5px;
  scrollbar-width:thin;
  scrollbar-color:var(--panel-hi) var(--panel-lo);
}
#console::-webkit-scrollbar{width:10px;}
#console::-webkit-scrollbar-track{background:var(--panel-lo);}
#console::-webkit-scrollbar-thumb{background:var(--panel);border:1px solid var(--bevel-lo);}
#console div{word-wrap:break-word;}

.c-white  {color:#e8e2d4;}
.c-info   {color:#8bd1ff;}
.c-green  {color:#6fdb6f;}
.c-orange {color:#e0973a;}
.c-red    {color:#ff5a5a;}
.c-yellow {color:#ffe36b;}
.c-say    {color:#ffe36b;}
.c-npc    {color:#5ad0ff;}
.c-loot   {color:#c8a2ff;}
.c-dim    {color:#8d8571;}

#chat-row{
  display:flex; align-items:center; gap:4px;
  border-top:2px solid var(--bevel-lo);
  padding:2px 4px;
  background:var(--panel);
}
#chat-mode{color:var(--gold); font-size:11px; white-space:nowrap;}
#chat-input{
  flex:1;
  background:#191817;
  border:1px solid var(--bevel-lo);
  color:#e8e2d4;
  font-family:var(--font);
  font-size:12px;
  padding:2px 4px;
  outline:none;
}
#chat-input:focus{border-color:var(--gold);}

/* ---------- sidebar ---------- */
#sidebar{
  width:212px;
  flex:0 0 212px;
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--panel-hi) var(--panel-lo);
}
#sidebar::-webkit-scrollbar{width:8px;}
#sidebar::-webkit-scrollbar-thumb{background:var(--panel);}

.panel{
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  flex:0 0 auto;
}
.panel.grow{flex:1 1 auto; min-height:120px; display:flex; flex-direction:column;}
.panel.grow .panel-b{flex:1; overflow-y:auto;}

.panel-h{
  background:linear-gradient(#4f4842,#332f2b);
  border-bottom:1px solid var(--bevel-lo);
  padding:2px 6px;
  font-size:11px;
  color:var(--gold);
  letter-spacing:.5px;
  display:flex; justify-content:space-between; align-items:center;
}
.panel-b{padding:4px;}
.panel-b.center{display:flex; justify-content:center;}

.mini-btn{
  background:var(--panel-lo); color:var(--ink);
  border:1px solid var(--bevel-lo);
  width:16px; height:14px; line-height:1;
  cursor:pointer; font-family:var(--font); font-size:11px;
}
.mini-btn:hover{color:var(--gold);}

#minimap{
  image-rendering:pixelated;
  border:2px solid var(--bevel-lo);
  cursor:pointer;
  background:#000;
}

/* ---------- paski ---------- */
.bar{
  position:relative;
  height:15px;
  background:#141312;
  border:1px solid var(--bevel-lo);
  margin-bottom:3px;
  overflow:hidden;
}
.bar-fill{height:100%; width:100%; transition:width .18s linear;}
.hp-bar .bar-fill{background:linear-gradient(#e04a4a,var(--hp));}
.mp-bar .bar-fill{background:linear-gradient(#5a8bff,var(--mp));}
.xp-bar .bar-fill{background:linear-gradient(#e8d45a,var(--xp));}
.bar-txt{
  position:absolute; inset:0;
  text-align:center; line-height:13px;
  font-size:10.5px; color:#fff;
  text-shadow:1px 1px 0 #000, -1px 0 0 #000;
}

#cond-row{display:flex; gap:3px; flex-wrap:wrap; min-height:0;}
.cond{
  width:18px;height:18px;
  border:1px solid var(--bevel-lo);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
  background:var(--slot);
}

/* ---------- przyciski ---------- */
.btn-row{display:flex; gap:3px; margin-bottom:3px; align-items:center;}
.tgl,.wbtn{
  background:linear-gradient(#4f4842,#332f2b);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  color:var(--ink);
  font-family:var(--font);
  font-size:12px;
  cursor:pointer;
  padding:2px 4px;
}
.tgl{width:26px; height:22px;}
.wbtn{flex:1; font-size:11px; height:20px;}
.tgl:hover,.wbtn:hover{color:var(--gold);}
.tgl.on{
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  background:#5c5347; color:var(--gold);
}
.sep{width:6px;}

/* ---------- lista bitwy ---------- */
#battle-list{max-height:118px; overflow-y:auto;}
.bl-row{
  display:flex; align-items:center; gap:4px;
  padding:1px 2px; cursor:pointer;
}
.bl-row:hover{background:#00000040;}
.bl-row.target{background:#5a1a1a; outline:1px solid #ff5a5a;}
.bl-row canvas{image-rendering:pixelated; flex:0 0 auto;}
.bl-info{flex:1; min-width:0;}
.bl-name{font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bl-hp{height:4px; background:#141312; border:1px solid #000;}
.bl-hp i{display:block; height:100%; background:#3fbf3f;}
.empty-note{color:var(--ink-dim); font-size:10.5px; padding:4px; text-align:center;}

/* ---------- ekwipunek ---------- */
#equipment{
  display:grid;
  grid-template-columns:repeat(3,38px);
  gap:3px;
  justify-content:center;
  margin-bottom:4px;
}
.eq-slot,.slot{
  width:38px;height:38px;
  background:var(--slot);
  border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  position:relative;
  display:flex;align-items:center;justify-content:center;
}
.eq-feet{grid-column:2;}
.eq-slot::before{
  content:attr(data-ph);
  position:absolute;
  font-size:7.5px;
  color:#4d4740;
  pointer-events:none;
}
.eq-slot.has::before,.slot.has::before{display:none;}
.eq-slot.drop-ok,.slot.drop-ok{border-color:var(--gold);}

.item-grid{
  display:grid;
  grid-template-columns:repeat(4,38px);
  gap:3px;
  justify-content:center;
}
.slot::before{content:'';}

.item{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;
  position:relative;
}
.item canvas{image-rendering:pixelated; pointer-events:none;}
.item .cnt{
  position:absolute; right:1px; bottom:0;
  font-size:9.5px; color:#fff;
  text-shadow:1px 1px 0 #000,-1px 0 0 #000;
  pointer-events:none;
}
#drag-ghost{
  position:fixed; z-index:200; pointer-events:none;
  opacity:.85; transform:translate(-16px,-16px);
}
#drag-ghost canvas{image-rendering:pixelated;}

#cap-row{
  display:flex;justify-content:space-between;
  font-size:10.5px;color:var(--ink-dim);
  padding:0 2px;
}
#gold-txt{color:var(--gold);}

/* ---------- menu kontekstowe ---------- */
#ctx-menu{
  position:fixed; z-index:210;
  background:var(--panel);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  min-width:110px;
  padding:2px;
}
#ctx-menu div{
  padding:2px 8px; cursor:pointer; font-size:11.5px;
}
#ctx-menu div:hover{background:#5c5347; color:var(--gold);}
#ctx-menu hr{border:none;border-top:1px solid var(--bevel-lo);margin:2px 0;}

/* ---------- okna modalne ---------- */
.win{
  position:fixed;
  background:var(--panel);
  border:3px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  z-index:100;
  min-width:240px;
  box-shadow:0 6px 24px #000a;
  display:flex; flex-direction:column;
  max-height:88vh;
}
.win-h{
  background:linear-gradient(#5b534a,#38332e);
  border-bottom:1px solid var(--bevel-lo);
  padding:3px 6px;
  color:var(--gold);
  cursor:move;
  display:flex; justify-content:space-between; align-items:center;
  flex:0 0 auto;
}
.win-x{cursor:pointer; color:var(--ink); padding:0 3px;}
.win-x:hover{color:#ff5a5a;}
.win-b{padding:8px; overflow-y:auto; flex:1;}

table.kv{width:100%; border-collapse:collapse; font-size:11.5px;}
table.kv td{padding:1px 3px;}
table.kv td:last-child{text-align:right; color:#e8e2d4;}
table.kv tr.hdr td{color:var(--gold); border-bottom:1px solid var(--bevel-lo); padding-top:6px;}
.skbar{height:5px;background:#141312;border:1px solid #000;margin-top:1px;}
.skbar i{display:block;height:100%;background:var(--xp);}

/* handel z NPC */
.trade-tabs{display:flex;gap:3px;margin-bottom:5px;}
.trade-tabs button{flex:1;}
.trade-list{max-height:260px;overflow-y:auto;}
.trade-row{
  display:flex;align-items:center;gap:6px;
  padding:2px;border-bottom:1px solid #00000040;
}
.trade-row:hover{background:#00000040;}
.trade-row canvas{image-rendering:pixelated;flex:0 0 auto;}
.trade-nm{flex:1;font-size:11px;}
.trade-pr{color:var(--gold);font-size:11px;}
.trade-row button{
  background:linear-gradient(#4f4842,#332f2b);
  border:1px solid var(--bevel-lo);color:var(--ink);
  cursor:pointer;font-family:var(--font);font-size:11px;padding:1px 6px;
}
.trade-row button:hover{color:var(--gold);}
.trade-row.dis{opacity:.45;}

/* ---------- tworzenie postaci ---------- */
#creation{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at 50% 30%, #2e2a22, #090807 75%);
  z-index:300;
  overflow:auto;
}
.cr-box{
  width:440px;
  background:var(--panel);
  border:3px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  padding:18px 22px 14px;
  text-align:center;
}
.cr-box h1{
  font-size:30px; color:var(--gold); letter-spacing:5px;
  text-shadow:2px 2px 0 #000; font-weight:normal;
}
.cr-box h1 span{color:#8a7a52; font-size:20px;}
.cr-sub{color:var(--ink-dim); font-size:11px; margin:2px 0 14px;}
.cr-lbl{display:block; text-align:left; color:var(--gold); font-size:11px; margin:10px 0 3px;}
#cr-name{
  width:100%; background:#191817; border:2px solid;
  border-color:var(--bevel-lo) var(--bevel-hi) var(--bevel-hi) var(--bevel-lo);
  color:#e8e2d4; font-family:var(--font); font-size:14px; padding:4px 6px; outline:none;
}
#cr-name:focus{border-color:var(--gold);}
#cr-vocs{display:grid; grid-template-columns:repeat(4,1fr); gap:4px;}
.voc{
  background:linear-gradient(#4f4842,#332f2b);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  color:var(--ink); cursor:pointer; padding:6px 2px;
  font-family:var(--font); font-size:11px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
}
.voc canvas{image-rendering:pixelated;}
.voc.on{background:#5c5347; color:var(--gold); border-color:var(--gold);}
#cr-voc-desc{
  font-size:11px; color:var(--ink-dim); margin-top:6px; min-height:44px;
  text-align:left; line-height:1.45; background:#00000030; padding:5px 7px;
}
#cr-outfit{display:flex; align-items:center; gap:14px; justify-content:center;}
#cr-preview{image-rendering:pixelated; background:#1a1917; border:2px solid var(--bevel-lo);}
#cr-colors{display:grid; grid-template-columns:repeat(9,16px); gap:3px;}
.swatch{width:16px;height:16px;border:1px solid #000;cursor:pointer;}
.swatch.on{outline:2px solid var(--gold);}
.cr-actions{display:flex; gap:8px; margin-top:16px;}
.big-btn{
  flex:1;
  background:linear-gradient(#6a5f4e,#3d372f);
  border:2px solid;
  border-color:var(--bevel-hi) var(--bevel-lo) var(--bevel-lo) var(--bevel-hi);
  color:var(--gold); font-family:var(--font); font-size:14px;
  padding:8px; cursor:pointer;
}
.big-btn:hover{background:linear-gradient(#7d7059,#4a4238);}
.big-btn.alt{color:var(--ink); font-size:12px;}
.big-btn:disabled{opacity:.4; cursor:default;}
.cr-foot{margin-top:12px; font-size:9.5px; color:#6b645a; line-height:1.4;}

/* pomoc */
.help-b h3{color:var(--gold);font-size:12px;margin:10px 0 3px;font-weight:normal;}
.help-b p, .help-b li{font-size:11.5px;line-height:1.5;}
.help-b ul{margin-left:16px;}
.help-b kbd{
  background:#191817;border:1px solid var(--bevel-hi);
  padding:0 4px;color:var(--gold);font-size:11px;
}

/* ekran śmierci */
#death-veil{
  position:fixed; inset:0; background:#300000; opacity:0;
  pointer-events:none; z-index:90; transition:opacity .4s;
}
#death-veil.on{opacity:.55;}

@media (max-width:1150px){
  #sidebar{width:190px;flex:0 0 190px;}
  #equipment{grid-template-columns:repeat(3,34px);}
  .eq-slot,.slot{width:34px;height:34px;}
  .item-grid{grid-template-columns:repeat(4,34px);}
}