/* MR TIBIA – THAIS · interfejs klienta */
:root{
  --bg:#0b0d10; --panel:#191b20; --panel2:#22252c; --line:#3a3f49;
  --gold:#d8c58a; --text:#dfe3ea; --dim:#9aa2b1;
  --hp:#39b54a; --mp:#2f6fd0; --xp:#c8a44a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:#07080a;color:var(--text);
  font:13px/1.45 Verdana,Geneva,sans-serif;
  overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer}

.client-shell{display:flex;flex-direction:column;height:100vh}

/* --- pasek tytulu --- */
.client-titlebar{display:none}
.client-brand{display:flex;align-items:center;gap:9px}
.brand-orb{
  width:30px;height:30px;border-radius:6px;display:grid;place-items:center;
  background:linear-gradient(#5b4a22,#2c2410);border:1px solid #6d5a2b;
  color:var(--gold);font-weight:700;font-size:12px;
}
.client-brand b{display:block;letter-spacing:.14em;font-size:12px;color:var(--gold)}
.client-brand small{display:block;color:var(--dim);font-size:10px}
.connection-status{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px}
.connection-status i{width:8px;height:8px;border-radius:50%;background:#b4523f;box-shadow:0 0 6px #b4523f}
.connection-status.ok i{background:#4caf50;box-shadow:0 0 6px #4caf50}
.title-actions{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--dim);font-size:11px}
.title-actions button{
  width:28px;height:26px;border-radius:5px;border:1px solid var(--line);
  background:var(--panel2);
}
.title-actions button:hover{border-color:var(--gold)}

/* --- uklad --- */
.client-grid{flex:1;display:grid;grid-template-columns:0 minmax(0,1fr) 292px;gap:5px;padding:5px;min-height:0;transition:grid-template-columns .18s ease}.client-grid.left-open{grid-template-columns:270px minmax(0,1fr) 292px}
.game-column{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0}

.game-frame{
  position:relative;flex:1;min-height:0;border:2px solid #000;border-radius:3px;
  background:#0d1b3a;box-shadow:inset 0 0 0 1px #4a4f5a;overflow:hidden;
}
#gameCanvas{display:block;width:100%;height:100%;image-rendering:pixelated}

.zone-badge,.fps-badge{
  position:absolute;top:8px;padding:3px 9px;border-radius:3px;font-size:10px;
  letter-spacing:.12em;background:rgba(0,0,0,.6);border:1px solid var(--line);color:var(--gold);
}
.zone-badge{left:8px}
.fps-badge{right:8px;color:var(--dim)}
.game-toast{
  position:absolute;left:50%;top:44px;transform:translateX(-50%) translateY(-8px);
  padding:6px 14px;border-radius:4px;background:rgba(8,10,14,.9);
  border:1px solid var(--line);color:var(--gold);font-size:12px;
  opacity:0;pointer-events:none;transition:.18s;
}
.game-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* --- czat --- */
.chat-panel{
  height:128px;min-height:88px;max-height:260px;resize:vertical;overflow:hidden;flex:0 0 auto;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line);border-radius:3px;
}
.chat-tabs{display:flex;align-items:center;gap:2px;padding:4px 6px;border-bottom:1px solid var(--line);background:#14161a}
.chat-tabs button{
  padding:3px 10px;font-size:11px;background:#23262d;border:1px solid #33373f;border-radius:3px 3px 0 0;
}
.chat-tabs button.active{background:#33373f;color:var(--gold)}
.chat-tabs span{margin-left:auto;font-size:10px;color:var(--dim)}
.chat-log{flex:1;overflow-y:auto;padding:6px 9px;font-size:12px}
.chat-line{margin:1px 0;color:#c7cdd8;word-break:break-word}
.chat-line.sys{color:#e0c878}
.chat-line.npc{color:#63d2ff}
.chat-line.me{color:#ffffff}
.chat-form{display:flex;align-items:center;gap:6px;padding:5px 7px;border-top:1px solid var(--line)}
.chat-form span{font-size:11px;color:var(--dim)}
.chat-form input{
  flex:1;background:#0e1013;border:1px solid var(--line);border-radius:3px;
  padding:5px 8px;color:var(--text);font:inherit;
}
.chat-form input:focus{outline:none;border-color:var(--gold)}
.chat-form button{padding:5px 12px;border:1px solid var(--line);border-radius:3px;background:var(--panel2)}

/* --- panel boczny --- */
.sidebar{display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;padding-right:5px;scrollbar-width:thin;scrollbar-color:#747982 #17191d}
.sidebar::-webkit-scrollbar{width:10px}.sidebar::-webkit-scrollbar-track{background:#17191d;border-left:1px solid #050607}.sidebar::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#4b4f56,#777c84,#44484f);border:1px solid #101216;border-radius:2px}.sidebar::-webkit-scrollbar-thumb:hover{background:#888d96}
.side-window{background:linear-gradient(145deg,#282b30,#16181c);border:1px solid #696e76;border-radius:1px;padding:6px;resize:vertical;overflow:hidden;min-height:42px;box-shadow:inset 0 0 0 1px #08090b,0 1px 3px #000}.side-window::-webkit-scrollbar{display:none}
.window-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--dim);margin-bottom:6px;cursor:grab;user-select:none;background:#292c32;margin:-5px -5px 6px;padding:4px 6px;border-bottom:1px solid #070809}
.window-title b{color:var(--gold);letter-spacing:.08em}
#corpseTakeAll{margin-left:auto;padding:3px 7px;background:#16191d;border:1px solid #555b63;color:var(--gold);font-size:10px;cursor:pointer}
#corpseTakeAll:hover{border-color:var(--gold)}#corpseTakeAll:disabled{opacity:.5;cursor:wait}

.minimap-wrap{position:relative;border:1px solid #000;background:#05070c}
#miniCanvas{display:block;width:100%;image-rendering:pixelated}
.mini-cross{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.35);font-size:14px;pointer-events:none}
.mini-buttons{display:flex;gap:4px;margin-top:5px}
.mini-buttons button{flex:1;padding:3px 0;background:var(--panel2);border:1px solid var(--line);border-radius:3px;font-size:12px}

.bar-row{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:10px;color:var(--dim)}
.bar-row>span{width:22px}
.bar-row>div{position:relative;flex:1;height:14px;background:#0d0f12;border:1px solid #000;border-radius:2px;overflow:hidden}
.bar-row i{position:absolute;inset:0;width:100%;display:block;transition:width .25s}
.bar-row.hp i{background:linear-gradient(#5fd36c,var(--hp))}
.bar-row.mana i{background:linear-gradient(#5b95e8,var(--mp))}
.bar-row b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;color:#fff;text-shadow:0 1px 2px #000}
.stat-line{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);margin-top:6px}
.stat-line b{color:var(--text)}
.xp-track{height:6px;background:#0d0f12;border:1px solid #000;border-radius:2px;margin-top:5px;overflow:hidden}
.xp-track i{display:block;height:100%;width:0;background:var(--xp);transition:width .25s}

.equipment-window{display:flex;flex-direction:column}.equipment-window>.window-title{flex:0 0 auto}.equipment-grid{display:grid;flex:1 1 auto;width:100%;min-height:208px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(48px,1fr));grid-template-areas:"necklace head backpack" "weapon body shield" ". legs ." ". feet .";gap:3px;background:#111318;padding:5px;border:2px ridge #555b63}.equipment-window .gear-stats,.equipment-window .combat-modes{flex:0 0 auto}
.eq-slot[data-slot=necklace]{grid-area:necklace}.eq-slot[data-slot=backpack]{grid-area:backpack}.eq-slot[data-slot=head]{grid-area:head}.eq-slot[data-slot=body]{grid-area:body}.eq-slot[data-slot=weapon]{grid-area:weapon}.eq-slot[data-slot=shield]{grid-area:shield}.eq-slot[data-slot=legs]{grid-area:legs}.eq-slot[data-slot=feet]{grid-area:feet}.eq-slot[data-slot=light]{grid-area:light}
.eq-slot{
  aspect-ratio:1;background:#0f1114;border:1px solid var(--line);border-radius:3px;
  display:grid;place-items:center;
}
.eq-slot img{width:70%;image-rendering:pixelated}
.eq-slot.empty{opacity:.35}
.combat-modes{display:flex;gap:4px;margin-top:6px}
.combat-modes button{flex:1;padding:4px 0;background:var(--panel2);border:1px solid var(--line);border-radius:3px}
.combat-modes button.active{border-color:var(--gold);color:var(--gold)}

.battle-list{display:flex;flex-direction:column;gap:3px;max-height:150px;overflow-y:auto}
.battle-row{
  display:flex;align-items:center;gap:6px;padding:3px 6px;text-align:left;
  background:#101216;border:1px solid var(--line);border-radius:3px;font-size:11px;
}
.battle-row.active{border-color:#c94a4a;color:#ffb9b9}
.battle-row span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.battle-row i{height:5px;width:100%;max-width:46px;background:var(--hp);border-radius:2px}

.backpack-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.bp-slot{
  aspect-ratio:1;background:#0f1114;border:1px solid var(--line);border-radius:3px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  font-size:9px;color:var(--dim);padding:2px;text-align:center;overflow:hidden;
}
.bp-slot.filled{background:#1b1f26;border-color:#4b515d;color:var(--text)}
.bp-slot b{color:var(--gold);font-size:11px}
.bp-slot span{line-height:1.1;font-size:8px;opacity:.8}

.side-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.side-actions button{padding:6px 0;background:var(--panel2);border:1px solid var(--line);border-radius:3px;font-size:11px}
.side-actions button:hover{border-color:var(--gold);color:var(--gold)}

/* --- dotyk --- */
.touch-controls{display:none}

/* --- nakladki --- */
.overlay{
  position:fixed;inset:0;display:none;place-items:center;
  background:rgba(4,5,8,.86);z-index:40;padding:20px;
}
.overlay.visible{display:grid}
.start-card,.help-card{
  max-width:520px;width:100%;background:linear-gradient(#1b1e24,#101216);
  border:1px solid #4a4230;border-radius:6px;padding:26px;text-align:center;position:relative;
}
.start-logo{display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:10px}
.start-logo span{
  width:34px;height:34px;border-radius:7px;display:grid;place-items:center;
  background:linear-gradient(#5b4a22,#2c2410);border:1px solid #6d5a2b;color:var(--gold);font-weight:700;
}
.start-logo b{letter-spacing:.2em;color:var(--gold)}
.start-card h1{margin:.2em 0 .4em;font-size:20px;color:#fff}
.start-card p{color:var(--dim);font-size:12px;margin:0 0 14px}
.start-points{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:16px}
.start-points span{padding:4px 9px;background:#22252c;border:1px solid var(--line);border-radius:3px;font-size:11px;color:var(--dim)}
.player-pill{font-size:12px;color:var(--dim);margin-bottom:14px}
.player-pill b{color:var(--gold)}
.play-btn{
  width:100%;padding:12px;border-radius:4px;border:1px solid #6d5a2b;
  background:linear-gradient(#6a5827,#3a2f13);color:var(--gold);
  font-weight:700;letter-spacing:.14em;
}
.play-btn:hover{filter:brightness(1.18)}
.start-card small{display:block;margin-top:12px;color:#6d7484;font-size:10px}
.close-overlay{position:absolute;right:10px;top:8px;background:none;border:none;font-size:20px;color:var(--dim)}
.help-card{text-align:left}
.help-card h2{margin-top:0;color:var(--gold);font-size:16px}
.help-card p{color:var(--dim);font-size:12px}
.help-card b{color:var(--text)}

/* --- telefon --- */
@media (max-width:980px){
  .client-grid{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .client-grid.left-open{grid-template-columns:1fr}.left-sidebar{display:none}
  .sidebar{flex-direction:row;overflow-x:auto;max-height:190px}
  .side-window{min-width:212px}
  .chat-panel{height:132px}
  .touch-controls{
    display:flex;position:fixed;left:0;right:0;bottom:8px;
    justify-content:space-between;padding:0 14px;z-index:20;pointer-events:none;
  }
  .dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:4px;pointer-events:auto}
  .dpad button{
    background:rgba(20,22,27,.82);border:1px solid var(--line);border-radius:6px;font-size:16px;
  }
  .dpad button[data-move=up]{grid-column:2;grid-row:1}
  .dpad button[data-move=left]{grid-column:1;grid-row:2}
  .dpad button[data-move=down]{grid-column:2;grid-row:2}
  .dpad button[data-move=right]{grid-column:3;grid-row:2}
  .touch-attack{
    width:66px;height:66px;border-radius:50%;pointer-events:auto;align-self:flex-end;
    background:rgba(90,40,40,.85);border:1px solid #8a4a4a;color:#ffd2d2;font-size:24px;
  }
}

/* Funkcjonalny ekwipunek i handel */
.item-icon{display:inline-block;width:32px;height:32px;flex:0 0 32px;image-rendering:pixelated;background-repeat:no-repeat}
.eq-slot{position:relative!important;display:grid!important;place-items:center!important;width:100%!important;height:100%!important;min-width:0!important;min-height:48px!important;aspect-ratio:auto!important;padding:1px!important;cursor:pointer;color:#e7e9ea;background:linear-gradient(135deg,#191c21,#090a0c)!important;border:1px solid #555b64!important;box-shadow:inset 0 0 0 1px #030405}
.eq-slot small{position:absolute;inset:auto 1px 1px;font-size:7px;color:#9ca2aa;text-align:center;text-shadow:0 1px #000}.eq-slot .item-icon{transform:scale(.95)}.eq-slot:hover,.bp-slot:hover{border-color:#c5ad63!important}
.gear-stats{padding:6px;font-size:11px;color:#d6c993}.bp-slot{display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:#fff}
.bp-slot b{position:absolute;right:2px;bottom:2px;font-size:10px;text-shadow:1px 1px #000}.bp-slot:disabled{cursor:default}
.shop-routes{display:grid;gap:4px;padding:6px}.shop-routes button{text-align:left;font-size:11px;padding:5px}
.trade-card{width:min(620px,94vw);max-height:85dvh;overflow-y:auto}.trade-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #35383d;font-size:12px}.trade-row span:not(.item-icon){flex:1}.trade-row button{padding:8px;white-space:nowrap;flex-shrink:0}.trade-row button:disabled{opacity:.35}
#itemDetails button{padding:10px 20px}.combat-modes #pickupBtn{width:100%}.sidebar{overflow-y:auto}.chat-line.global{color:#a5d9f5}
@media(max-width:700px){.trade-row{gap:6px;font-size:11px}.trade-row button{padding:7px 5px}.trade-card{max-height:88dvh}.title-actions{font-size:10px}.connection-status{max-width:40vw;font-size:10px}}

/* Menu Tibia, przeciaganie przedmiotow i ciala */
.context-menu{position:fixed;z-index:90;display:none;min-width:170px;padding:4px;background:#17191e;border:1px solid #5b5f68;border-radius:3px;box-shadow:0 10px 28px #000b}
.context-menu.visible{display:grid}.context-menu button{padding:7px 10px;text-align:left;color:#ddd;background:transparent;border:0;border-radius:2px;font:11px Verdana,sans-serif}.context-menu button:hover{background:#343842;color:#f1d477}.context-menu hr{width:100%;border:0;border-top:1px solid #343840;margin:3px 0}
.bp-slot[draggable=true],.eq-slot[draggable=true],.corpse-item[draggable=true]{cursor:grab}.bp-slot.dragging,.eq-slot.dragging,.corpse-item.dragging{opacity:.35}.bp-slot.drop-target,.eq-slot.drop-target,#gameFrame.drop-target{outline:2px solid #d9bd68;outline-offset:-2px}
.corpse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;min-height:52px;background:#0b0c0e;padding:4px;border:1px solid #454a52}.corpse-item{aspect-ratio:1;min-height:48px;position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#1b1e22,#0b0c0e);border:1px solid #4b5058;border-radius:1px}.corpse-item b{position:absolute;right:3px;bottom:2px;font-size:10px;color:#e2c96f}.corpse-empty{grid-column:1/-1;color:#858a94;font-size:11px;padding:12px}.corpse-window{min-height:82px}
.corpse-item.empty{background:linear-gradient(135deg,#17191d,#090a0c);cursor:default;opacity:1}
.compact-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.compact-status button{width:24px;background:#282b31;border:1px solid #484d56}.skills-card{width:min(390px,94vw)}.skills-list{display:grid;gap:4px}.skill-row{display:grid;grid-template-columns:120px 42px 1fr;align-items:center;gap:8px;padding:5px 7px;background:#101216;border:1px solid #373b43;font-size:11px}.skill-row b{color:#f0d783;text-align:right}.skill-track{height:7px;background:#050607;border:1px solid #333}.skill-track i{display:block;height:100%;background:#c3a54d}.panel-dragging{opacity:.42}
.panel-controls{display:flex;gap:2px;margin-left:auto;padding-left:5px}.panel-controls button{width:18px;height:17px;display:grid;place-items:center;padding:0;background:#42464d;border:1px solid #111;color:#d3d5d8;font:bold 11px Arial}.panel-controls button:hover{background:#626872;color:#fff}.panel-minimized{height:27px!important;min-height:27px!important;resize:none}.panel-minimized>*:not(.window-title){display:none!important}.panel-hidden{display:none!important}.panel-dock{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:5px;padding:4px 5px;background:#292c31;border:1px solid #696e76;color:#d7c786;font-size:10px;box-shadow:0 2px 5px #000}.panel-dock>div{display:flex;gap:3px;flex-wrap:wrap}.panel-dock button{padding:2px 5px;background:#444950;border:1px solid #111;color:#eee;font-size:9px}.panel-dock>div:empty:after{content:'wszystkie aktywne';color:#858a91}.ground-drag-ghost{position:fixed;z-index:120;width:42px;height:42px;display:grid;place-items:center;pointer-events:none;background:#121419dd;border:1px solid #d7bd68;border-radius:3px;transform:translate(-50%,-50%)}
.left-sidebar{min-width:0;opacity:0;pointer-events:none;padding:0;transition:opacity .18s}.left-open .left-sidebar{opacity:1;pointer-events:auto;padding-right:5px}.panel-drop-hint{margin:8px;border:1px dashed #666b72;padding:18px 8px;text-align:center;color:#777d85;font-size:10px}.left-sidebar:has(.side-window) .panel-drop-hint{display:none}.panel-dock>span{color:#8f949c;font-size:9px}.skills-panel-list{display:grid;gap:3px;padding:2px}.tibia-skill{display:block;font-size:10px;line-height:12px;color:#d1d3d6}.tibia-skill>div{display:flex;justify-content:space-between;gap:6px;height:12px}.tibia-skill b{color:#e4e4e4}.tibia-skill-track{display:block!important;position:relative!important;width:100%!important;height:3px!important;min-height:3px!important;max-height:3px!important;overflow:hidden;background:#08090a;border:1px solid #555;margin-top:1px}.tibia-skill-track i{display:block!important;position:static!important;height:1px!important;min-height:1px!important;background:#19bf32}.tibia-skill:nth-child(-n+5) .tibia-skill-track i{background:#d94b40}.skills-window{min-height:220px}

/* szare podpowiedzi w pustych slotach ekwipunku */
.eq-ghost{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.eq-ghost svg{width:62%;height:62%;fill:#4a5058;opacity:.65}
.eq-slot:hover .eq-ghost svg{fill:#5d646e;opacity:.8}
.combat-modes #pvpToggle.active{border-color:#c05a4a;color:#ff9d7a}

/* pasek najedzenia */
.food-row{display:flex;align-items:center;gap:6px;margin:4px 0 2px}
.food-row .food-ico{font-size:12px;line-height:1;filter:saturate(.8)}
.food-row>div{flex:1;height:5px;background:#0d0f12;border:1px solid #000;border-radius:2px;overflow:hidden}
.food-row i{display:block;height:100%;width:60%;transition:width .3s}
.food-row i.ok{background:#8a6a3a}
.food-row i.low{background:#b04a3a}

/* okno Set Outfit */
.outfit-card{width:min(680px,95vw);max-height:88dvh;overflow-y:auto;position:relative;
  background:linear-gradient(#1b1e24,#101216);border:1px solid #4a4230;border-radius:6px;padding:20px}
.outfit-card h2{margin:0 0 12px;color:var(--gold);font-size:16px}
.outfit-top{display:flex;gap:14px;margin-bottom:12px}
#outfitPreview{width:192px;height:192px;background:#0c0e12;border:1px solid #3a3f49;image-rendering:pixelated}
.outfit-list{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:4px;align-content:start;max-height:192px;overflow-y:auto}
.outfit-list button{padding:6px;background:#22252c;border:1px solid var(--line);border-radius:3px;font-size:11px}
.outfit-list button.active{border-color:var(--gold);color:var(--gold)}
.outfit-parts{display:grid;gap:10px}
.outfit-part b{display:block;font-size:11px;color:var(--dim);margin-bottom:3px}
.color-grid{display:grid;grid-template-columns:repeat(19,1fr);gap:1px}
.color-grid button{aspect-ratio:1;border:1px solid #0006;border-radius:0;padding:0;min-width:0}
.color-grid button.sel{outline:2px solid #fff;outline-offset:-2px;z-index:1}
.outfit-actions{margin-top:14px}

.battle-row.pvp-row{border-color:#8a4a4a;color:#ffc8b4}
.battle-row.pvp-row i{background:#d06a5a}

.mouse-control{display:flex;align-items:center;gap:6px;padding:5px 8px;color:#e7e9ea;font:12px system-ui,sans-serif}.mouse-control select{min-width:0;flex:1;background:#090909;color:#e7e9ea;border:1px solid #2f3336;border-radius:8px;padding:5px}

/* wybor stylu walki */
.style-card{width:min(560px,94vw);background:linear-gradient(#1b1e24,#101216);
  border:1px solid #4a4230;border-radius:6px;padding:22px}
.style-card h2{margin:0 0 8px;color:var(--gold);font-size:17px}
.style-card p{color:var(--dim);font-size:12px;margin:0 0 14px}
.style-grid{display:grid;gap:8px}
.style-grid button{display:block;text-align:left;padding:10px 12px;background:#22252c;
  border:1px solid var(--line);border-radius:4px}
.style-grid button:hover{border-color:var(--gold)}
.style-grid b{display:block;color:var(--gold);font-size:13px;margin-bottom:2px}
.style-grid span{display:block;color:var(--dim);font-size:11px}