/* Desktop as the Tibia client (docs/DESIGN.md › Desktop, web/desk.js): only with body.desk, which desk.js sets on
   screens from 1280×700. The Eternal Realms art behind, the logo above, the game as a window with side bars of
   small windows and a console under the game. Only the colours of the Bestiary Arena skin. */
body.desk{height:100dvh;margin:0;padding:0;overflow:hidden;background:#111 url('/assets/ui/desk/fundo.webp') center top/cover no-repeat fixed}
.dk{--dk-l:214px;--dk-r:190px;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);padding:0 max(16px,env(safe-area-inset-right,0px),6vw) 10px max(16px,env(safe-area-inset-left,0px),6vw)}
.dk-brand{display:grid;place-items:center;overflow:hidden;padding-top:2px}
.dk-brand img{width:auto;max-width:100%;height:clamp(64px,calc(13vh - 4px),140px);object-fit:contain;filter:drop-shadow(0 6px 12px #000)}
.dk-client{min-height:0;display:grid;grid-template-columns:var(--dk-l) minmax(0,1fr) var(--dk-r) var(--dk-r);background:#111 url('/assets/ui/classic/panel-texture.png');border:2px solid #c5b47c;outline:1px solid #000;box-shadow:inset 0 0 0 1px #000,0 14px 36px #000}
.dk-bar{min-height:0;display:flex;flex-direction:column;gap:2px;padding:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6a6a6a #1c1c1c;background:#1c1c1c url('/assets/ui/classic/dark_background.png');border-right:1px solid #000;border-left:1px solid #000}
.dk-slot{display:contents}
.dk-game{min-width:0;min-height:0;display:flex;flex-direction:column;gap:2px;padding:2px}
.dk-screen{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#6a6a6a #1c1c1c}

/* The game itself fills the middle column: no rail, no centred page. */
body.desk .shell{max-width:none;width:auto;margin:0;padding:0}
body.desk .shell>footer{display:none}
body.desk .arena-cols{display:block}
body.desk .arena-cols>.client-arena{max-width:none;margin:0}
/* The field fits the height left by the logo, the console and the arena's own rows. */
body.desk .client-board{max-height:var(--dk-board,max(220px,calc(73dvh - 330px)))}

/* Mini window: title with − and +, body hidden while minimised. */
.dk-mw{position:static;flex:none;display:flex;flex-direction:column;min-height:0;margin:0;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:inset 1px 1px #6a6a6a}
.dk-mw>header{flex:none;display:flex;align-items:center;gap:4px;height:19px;padding:0 2px 0 4px;background:#2f2f2f;border-bottom:1px solid #111;box-shadow:0 1px #3d3d3d;white-space:nowrap;overflow:hidden;cursor:default;user-select:none}
.dk-mw>header .dk-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#c0c0c0}
.dk-mw>header small{color:#a9a9a9;font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:45%}
.dk-ic{flex:none;width:14px;height:14px;display:grid;place-items:center}
.dk-ic img{max-width:14px;max-height:14px;image-rendering:pixelated}
.dk-btn{flex:none;width:14px;height:14px;min-width:0;min-height:0;padding:0;border:0;box-shadow:none;background:url('/assets/ui/classic/miniwindow_buttons.png') 0 0 no-repeat}
.dk-btn.dk-min{background-position:0 0}.dk-btn.dk-min:hover{background-position:0 -14px}
.dk-btn.dk-max{display:none;background-position:-14px 0}.dk-btn.dk-max:hover{background-position:-14px -14px}
.dk-mw.is-min .dk-min{display:none}.dk-mw.is-min .dk-max{display:block}
.dk-mw.is-min>.dk-body{display:none}
.dk-body{min-height:0;display:flex;flex-direction:column;gap:3px;padding:3px;overflow:hidden}
.dk-body>*{flex-shrink:0}
/* The last open window of a bar takes the rest of its height and scrolls inside. */
.dk-fill{flex:1 1 0;min-height:72px}
.dk-fill>.dk-body{flex:1 1 0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6a6a6a #1c1c1c}
.dk-empty{margin:2px;color:#a9a9a9}
.dk-fill #dk-map{flex:1 1 0;min-height:60px;max-height:none}

/* The collection as the client's backpack: arena-ui.js draws it in the Arena; it is shown over its place in the left
   bar (desk.js · placeBackpack sets the box). Folded, it is only its title. */
.dk-hold{flex:none;min-height:0}
.dk-hold.dk-fill{flex:1 1 0;min-height:120px}
.dk-hold.is-min{height:21px;flex:none}
body.desk #content .client-bestiary{position:fixed;z-index:6;left:var(--dk-bp-x);top:var(--dk-bp-y);width:var(--dk-bp-w);height:var(--dk-bp-h);margin:0;display:flex;flex-direction:column;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:inset 1px 1px #6a6a6a}
body.desk #content .client-bestiary>.window-title{min-height:19px;height:19px;margin:0;padding:0 4px;border-bottom:1px solid #111}
body.desk #content .client-bestiary .ba-toolbar{padding:3px}
body.desk #content .client-bestiary .ba-grid{flex:1 1 auto;align-content:start;max-height:none;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6a6a6a #1c1c1c}

/* The battle result covers the middle column (desk.js sets its box), so it is never squeezed into a short field. */
body.desk #field-wrap .ba-outcome{position:fixed;left:var(--dk-sx);top:var(--dk-sy);width:var(--dk-sw);height:var(--dk-sh);inset:var(--dk-sy) auto auto var(--dk-sx);z-index:7}
body.desk #field-wrap .ba-outcome-window{width:min(360px,100%);max-height:calc(var(--dk-sh) - 24px);overflow-y:auto}

/* Rows: Battle List, Time, Bestiary Tracker */
.dk-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:5px;align-items:center;padding:1px 2px;border:1px solid transparent;cursor:pointer}
.dk-row:hover{border-color:#6a6a6a}
.dk-row.is-sel{border-color:#c5b47c}
.dk-row.is-dead{opacity:.45}
.dk-row>.sprite,.dk-row>svg,.dk-row>.item-icon{width:32px;height:32px;background:#1c1c1c;border:1px solid #000}
.dk-row b{display:block;color:#fff;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-row b small{color:#a9a9a9}
.dk-bar-hp{display:block;position:relative;height:5px;margin-top:2px;background:#000;border:1px solid #000}
.dk-bar-hp i{position:absolute;inset:0 auto 0 0;background:#5fc85f}
.dk-bar-hp.is-foe i{background:#e8756c}.dk-bar-hp.is-energy i{background:#4b98da}.dk-bar-hp.is-gold i{background:#e8c547}
.dk-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:2px}
.dk-seg i{position:relative;height:5px;background:#000;border:1px solid #000}
.dk-seg u{position:absolute;inset:0 auto 0 0;background:#5fc85f}
.dk-kv{display:flex;justify-content:space-between;gap:6px;white-space:nowrap}
.dk-kv>span{min-width:0;overflow:hidden;text-overflow:ellipsis;color:#a9a9a9}
.dk-kv>b{color:#fff;font-weight:normal;font-variant-numeric:tabular-nums}
.dk-gold{color:#f4d35e!important}.dk-good{color:#5fc85f!important}.dk-bad{color:#e8756c!important}
.dk-sep{flex:none;height:2px;margin:1px 0;border-top:1px solid #000;border-bottom:1px solid #6a6a6a}
.dk-fights{margin:0;padding:2px 3px;list-style:none;display:grid;gap:1px;background:#1c1c1c;border:1px solid #000}
.dk-wide{width:100%;min-height:22px}

/* Minimap and Status */
#dk-map{display:block;width:100%;height:auto;max-height:150px;aspect-ratio:auto!important;object-fit:cover;image-rendering:pixelated;background:#000;border:1px solid #000;cursor:pointer}
.dk-meter{display:grid;grid-template-columns:12px minmax(0,1fr);gap:4px;align-items:center}
.dk-meter img{image-rendering:pixelated}
.dk-gauge{position:relative;display:block;height:13px;background:#000;border:1px solid #000;box-shadow:1px 1px #6a6a6a}
.dk-gauge i{position:absolute;inset:0 auto 0 0;background:#5fc85f}
.dk-gauge b{position:absolute;inset:0;display:grid;place-items:center;font:10px/10px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 1px #000}
.dk-coins{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dk-coins>*{display:flex;align-items:center;gap:4px;min-width:0;min-height:20px;height:20px;padding:0 4px;white-space:nowrap;overflow:hidden;color:#fff;background:#262626;border:1px solid #111;box-shadow:none;font-size:11px}
.dk-coins img{width:12px;height:12px;object-fit:contain;image-rendering:pixelated}

/* Controles: the five destinations of the game as the client's icon buttons. */
body.desk nav.app-nav{position:static;inset:auto;width:auto;z-index:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:auto;gap:2px;padding:0;background:none;border:0;box-shadow:none}
body.desk nav.app-nav button{height:34px;min-height:34px;justify-content:center;padding:2px}
body.desk nav.app-nav button img{max-width:24px;max-height:24px}
/* Icons only, like the client; the name stays for screen readers and in the tooltip. */
body.desk nav.app-nav button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.desk nav.app-nav .app-dot{top:2px;right:2px}

/* Set: the client's inventory, per creature. */
.dk-inv{display:grid;grid-template-columns:repeat(3,34px);grid-auto-rows:34px;gap:3px;justify-content:center;padding:2px 0}
.dk-inv>.dk-slot,.dk-loot>.dk-slot{display:grid;place-items:center;position:relative;width:34px;height:34px;background:url('/assets/ui/classic/item.png') center/34px 34px;border:1px solid #000}
.dk-inv>.dk-slot.is-empty{opacity:.5}
.dk-inv .sprite,.dk-loot .sprite,.dk-loot .dk-px{width:32px;height:32px;image-rendering:pixelated}
.dk-cap{display:grid;place-items:center;align-content:center;text-align:center;overflow:hidden;background:#1c1c1c;border:1px solid #000;font-size:9px;line-height:11px;color:#a9a9a9}
.dk-cap b{color:#fff;font-weight:normal;font-size:11px}
.dk-who .sprite,.dk-who svg{width:32px;height:32px}
.dk-bonus{display:grid;gap:1px}
.dk-acts{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dk-acts button{min-height:22px;padding:0 4px}
.rarity-green.dk-slot{box-shadow:inset 0 0 0 1px #5fc85f}.rarity-blue.dk-slot{box-shadow:inset 0 0 0 1px #4b98da}.rarity-purple.dk-slot{box-shadow:inset 0 0 0 1px #c5b47c}.rarity-yellow.dk-slot{box-shadow:inset 0 0 0 1px #e8c547}

/* Analysers */
.dk-dmg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 4px}
.dk-dmg>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-dmg>b{color:#fff;font-weight:normal}
.dk-dmg>.dk-bar-hp{grid-column:1/-1;margin:0}
.dk-loot{display:grid;grid-template-columns:repeat(auto-fill,34px);gap:3px;justify-content:center}
.dk-loot b{position:absolute;right:1px;bottom:0;font:bold 9px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.dk-quest{display:grid;gap:2px;width:100%;min-height:0;height:auto;padding:3px 4px;text-align:left;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.dk-quest b{color:#fff;font-weight:normal}
.dk-quest small{color:#a9a9a9;white-space:normal}
.dk-quest .dk-bar-hp{margin:0}
.dk-quest.is-ready{border-color:#5fc85f}
.dk-quest .dk-kv{font-size:10px}

/* Console under the game */
.dk-console{flex:none;height:clamp(96px,14vh,160px);display:flex;flex-direction:column;background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:inset 1px 1px #6a6a6a}
.dk-ctabs{flex:none;display:flex;gap:1px;padding:2px 2px 0}
.dk-ctabs .grow{flex:1}
.dk-ctabs button{min-height:20px;height:20px;padding:0 10px}
.dk-ctabs button.active{color:#fff;background:#1c1c1c;border-color:#c5b47c}
.dk-log{flex:1 1 0;min-height:0;margin:0 2px 2px;padding:3px 6px;list-style:none;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#6a6a6a #1c1c1c;background:#1c1c1c;border:1px solid #000}
.dk-log li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c0c0c0}
.dk-log time{margin-right:6px;color:#6a6a6a}
.dk-log .is-win{color:#fff}.dk-log .is-loss{color:#e8756c}.dk-log .is-loot{color:#f4d35e}.dk-log .is-codex{color:#5fc85f}.dk-log .is-quest{color:#4b98da}

@media (max-width:1599px){.dk{--dk-l:196px;--dk-r:174px;padding-left:max(16px,3vw);padding-right:max(16px,3vw)}.dk-inv{grid-template-columns:repeat(3,32px);grid-auto-rows:32px}.dk-inv>.dk-slot{width:32px;height:32px;background-size:32px}}
@media (max-height:860px){.dk-brand img{height:clamp(56px,9vh,84px)}#dk-map{max-height:110px}}
@media (prefers-reduced-motion:reduce){body.desk{background-attachment:scroll}}