/* Navegação (docs/DESIGN.md › Navegação): the top bar (avatar with its menu, Wiki and the balances), the five
   destinations at the bottom on a phone and as a rail on the left on a desktop, the segments of a destination with
   more than one screen and the balance windows. Only the colours of the Bestiary Arena skin. */
body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}

/* Top bar */
.shell>header.app-top{position:relative;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;padding:3px 6px}
.app-avatar{position:relative;display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;height:34px;min-height:34px;padding:0 8px 0 2px}
.app-avatar>img{flex:0 0 auto;width:32px;height:28px;image-rendering:pixelated}
.app-avatar .logo{overflow:hidden;text-overflow:ellipsis}
.app-avatar.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.app-dot{position:absolute;top:2px;right:2px;width:7px;height:7px;background:#e8c547;border:1px solid #111;font-style:normal;pointer-events:none}
.app-dot[hidden]{display:none}
.shell>header.app-top .wiki-button{margin-left:auto;height:28px;min-height:28px;padding:0 6px}
.shell>header.app-top .wiki-button img{width:16px;height:16px}
.shell>header.app-top .resources{margin-left:0;display:flex;gap:3px;flex:0 0 auto}
.resources .res{display:inline-flex;align-items:center;gap:3px;height:28px;min-height:28px;min-width:0;padding:0 6px;color:#fff;background:#1c1c1c;border:1px solid #111;border-image:none;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.resources .res[hidden]{display:none}
.resources .res:hover{border-color:#c5b47c}
.resources .res img{width:16px;height:16px;image-rendering:pixelated}
.resources .res #stamina-icon,.resources .res img.native{width:auto;height:auto}
.resources .res b{font:11px 'Tibia Pixel',Verdana,sans-serif;color:#fff}

/* Avatar menu: every screen that is not one of the five destinations. */
.app-menu{position:absolute;left:4px;top:calc(100% + 2px);z-index:60;display:grid;gap:2px;width:220px;max-width:calc(100vw - 16px);padding:4px;overflow:visible;flex-basis:auto;
 background:#3d3d3d url('/assets/ui/classic/panel-texture.png');border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a,0 4px 12px #000}
.app-menu[hidden],.app-menu button[hidden]{display:none}
.app-menu button{position:relative;display:flex;align-items:center;gap:8px;width:100%;min-height:34px;height:34px;padding:0 8px;text-align:left;font-size:11px}
.app-menu button img{width:16px;height:16px;flex:0 0 16px;image-rendering:pixelated}
.app-menu button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.app-menu .hdr-chest b{margin-left:auto;min-width:15px;height:15px;padding:0 3px;font:bold 11px/15px 'Tibia Pixel',Verdana,sans-serif;text-align:center;color:#1c1c1c;background:#e8c547;border:1px solid #111}
.app-menu .hdr-chest b:empty{display:none}
.app-menu .hdr-chest.is-new{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.app-menu .hdr-chest.is-new img{animation:hdr-chest 1.6s ease-in-out infinite}
@keyframes hdr-chest{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* The five destinations: a bar at the bottom of the phone. */
nav.app-nav{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin:0;padding:3px 3px calc(3px + env(safe-area-inset-bottom,0px));overflow:visible;
 background:#2b2b2b url('/assets/ui/classic/panel-texture.png');border-top:1px solid #111;box-shadow:0 -1px #6a6a6a}
nav.app-nav button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;min-width:0;height:54px;min-height:54px;padding:1px 1px 3px;color:#a9a9a9;font-size:11px;line-height:12px;letter-spacing:-.5px}
nav.app-nav button img{display:block;max-width:32px;max-height:32px;width:auto;height:auto;image-rendering:pixelated;flex:0 0 auto}
nav.app-nav button span{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.app-nav button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
nav.app-nav button.active img{filter:none}
nav.app-nav .app-dot{top:4px;right:calc(50% - 20px)}

/* Arena modes (Campanha, Raids, PvP, Treino): one row whatever how many are open. */
.pv-modes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}

/* Segments of a destination (Loja: Store, Market, Inventário; Time: Criaturas, Arsenal). */
.app-subnav{margin:4px 0 0}
.app-subnav[hidden]{display:none}
.app-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;max-width:640px}
.app-seg button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:30px;min-height:30px;padding:0 4px;white-space:nowrap}
.app-seg button img{width:16px;height:16px;flex:0 0 16px;image-rendering:pixelated}
.app-seg button b{min-width:15px;height:15px;padding:0 3px;font:bold 11px/15px 'Tibia Pixel',Verdana,sans-serif;color:#1c1c1c;background:#e8c547;border:1px solid #111}
.app-seg button.active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}

/* Balance windows (stamina, gold, Bestiary Coins): in the middle of the screen. */
dialog.window.res-modal{width:min(340px,calc(100vw - 32px))}
.res-head{display:flex;align-items:center;gap:10px;padding:8px;margin-bottom:6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.res-head>img{flex:0 0 auto;width:auto;height:auto;max-width:32px;max-height:32px;image-rendering:pixelated}
.res-head b{display:block;font:bold 22px/22px 'Tibia Pixel',Verdana,sans-serif;color:#f4d35e;text-shadow:1px 1px #000}
.res-head small{display:block;color:#c0c0c0}
.res-kv{display:flex;justify-content:space-between;gap:8px;padding:3px 6px;margin-bottom:2px;background:#1c1c1c;color:#c0c0c0}
.res-kv b{color:#fff;font-weight:normal;text-align:right}
#res-body .pf-note{margin:6px 0}
.res-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:8px}
.res-acts button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:30px}
.res-acts button img{width:16px;height:16px;image-rendering:pixelated}

/* Arena: the Bestiário folds away on a phone and stands beside the arena on a desktop. */
.client-bestiary .window-title .ba-fold{flex:0 0 auto;min-width:0;height:15px;min-height:15px;margin-left:auto;padding:0 6px;font-size:10px;line-height:13px}
.client-bestiary.is-closed .ba-toolbar,.client-bestiary.is-closed .ba-grid{display:none}

/* Sprites: whole multiples of their pixels (app.js · fitSprites); never stretched before that runs. */
img.sprite,img.tiny,img.ba-sprite{box-sizing:border-box;object-fit:scale-down;image-rendering:pixelated}
.ba-slot>img.ba-sprite{object-position:right bottom}

/* Conta: the long list of devices opens on request. */
.acct-more summary{cursor:pointer;padding:6px 2px 2px;color:#e4ca78}

@media(max-width:420px){
 .app-avatar .logo{display:none}
 .app-avatar{padding:0 2px}
 .shell>header.app-top .wiki-button span{display:none}
 .resources .res{padding:0 4px}
}
@media(max-width:340px){nav.app-nav button{font-size:10px;letter-spacing:-.4px}}

/* Desktop: the rail on the left and the screens using the width. */
@media(min-width:1000px){
 body{padding-bottom:0;padding-left:96px}
 nav.app-nav{top:0;right:auto;bottom:0;width:92px;grid-template-columns:1fr;grid-auto-rows:64px;align-content:start;gap:3px;padding:8px 4px;border-top:0;border-right:1px solid #111;box-shadow:1px 0 #6a6a6a}
 nav.app-nav button{height:64px;min-height:64px;gap:4px}
 nav.app-nav .app-dot{top:6px;right:14px}
 .shell>header.app-top{padding:3px 8px}
 .app-menu{width:240px}
 .arena-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:8px;align-items:start}
 .arena-cols>.client-arena{max-width:none;margin:0}
 .arena-cols>.client-bestiary{margin-top:0;position:sticky;top:8px}
 .arena-cols .ba-grid{max-height:calc(100dvh - 120px)}
 dialog.window#detail{width:min(760px,calc(100vw - 140px))}
 .training-window{max-width:none}
 .pf-overview{columns:2;column-gap:8px}
 .pf-overview>*{break-inside:avoid;margin:0 0 8px;min-width:0}
 .pf-overview>:last-child{column-span:all}
 .acct{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
 .acct>.acct-version{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.app-menu .hdr-chest.is-new img{animation:none}}
.training-modes{margin:6px 7px 0}
.training-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}