/* Maestria das criaturas (docs/MAESTRIA.md, docs/DESIGN.md): rank header, the ladder of ranks with two options each
   (Weapon Proficiency icons in their client frame), costs, provas, the power cap and the diary. Only the colours of
   the Bestiary Arena skin. */
.ms-pad{padding:6px}
.ms-sub{margin:8px 0 4px;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0;font-weight:normal}
.ms-wp{display:inline-block;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle;flex:none}
.ms-badge{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;background:url('/assets/tibia-icons/weapon_proficiency/Weapon_Proficiency_Border_Inactive.png') no-repeat center/38px 38px;image-rendering:pixelated}
.ms-badge.is-on{background-image:url('/assets/tibia-icons/weapon_proficiency/Weapon_Proficiency_Border_Active.png')}
.ms-chip{display:inline-flex;align-items:center;gap:3px;color:#e8c547;white-space:nowrap}
.ms-chip .ti{flex:none}
.ms-epithet{color:#e8c547}
.ms-ready{color:#5fc85f;font-weight:normal}
/* Bars: flat colours (no gradients) */
.ms-bar{position:relative;display:block;height:7px;background:#1c1c1c;border:1px solid #000;box-shadow:1px 1px #6a6a6a}
.ms-bar i{position:absolute;left:0;top:0;bottom:0;background:#e8c547}
.ms-bar.is-green i{background:#5fc85f}
/* Header */
.ms-head{padding:0 0 4px}
.ms-head>*{margin-left:6px;margin-right:6px}
.ms-rank{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 0 4px}
.ms-rank b{color:#e8c547;font-weight:normal;font-size:12px}
.ms-rank small,.ms-pm small{display:block;color:#a9a9a9}
.ms-rank>span:nth-child(2) small{color:#fff}
.ms-pm{text-align:right}.ms-pm b{color:#fff}
.ms-head .pf-note{margin-top:4px}
/* Ladder */
.ms-ladder{display:grid;gap:4px;padding:6px}
.ms-tier{display:grid;grid-template-columns:86px minmax(0,1fr) minmax(0,1fr);gap:4px;align-items:stretch}
.ms-tn{display:grid;align-content:center;gap:1px;padding:4px 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.ms-tn b{color:#fff;font-weight:normal}.ms-tn small{color:#a9a9a9}
.ms-tier.is-locked .ms-tn b{color:#a9a9a9}
.ms-opt{display:grid;grid-template-columns:38px minmax(0,1fr);gap:2px 6px;align-items:start;text-align:left;white-space:normal;line-height:13px;padding:4px 6px;
 border:1px solid #111;background:#1c1c1c;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;min-height:52px;color:#c0c0c0;min-width:0}
.ms-opt b{color:#fff;font-weight:normal;overflow-wrap:anywhere}.ms-opt>span:last-child{color:#a9a9a9;overflow-wrap:anywhere}
.ms-fr{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;background:url('/assets/tibia-icons/weapon_proficiency/Weapon_Proficiency_Border_Inactive.png') no-repeat center/38px 38px;image-rendering:pixelated}
.ms-fr.is-on{background-image:url('/assets/tibia-icons/weapon_proficiency/Weapon_Proficiency_Border_Active.png')}
.ms-opt.is-sel{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.ms-opt.is-sel b{color:#e8c547}
.ms-opt.is-other{opacity:.45}
.ms-opt:disabled:not(.is-sel){opacity:.55}
.ms-tier.is-locked .ms-opt{opacity:.45}
.ms-tier.is-legend .ms-opt{grid-column:2/-1}
.ms-tier.is-legend:not(.is-locked) .ms-opt b{color:#e8c547}
.ms-titlepick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 6px 6px}
.ms-titlepick label{display:flex;gap:6px;align-items:center;color:#c0c0c0}
/* Next rank */
.ms-costs{display:flex;flex-wrap:wrap;gap:4px}
.ms-cost{display:inline-grid;grid-template-columns:auto auto;gap:0 4px;align-items:center;padding:3px 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:#e8756c}
.ms-cost small{grid-column:1/-1;color:#a9a9a9}
.ms-cost b{font-weight:normal}
.ms-cost.is-ok{color:#5fc85f}
.ms-provas{display:grid;gap:4px}
.ms-prova{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:1px 6px;align-items:center;padding:4px 6px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.ms-prova>span{grid-row:span 3;color:#5fc85f}
.ms-prova b{color:#fff;font-weight:normal;grid-column:2/-1}.ms-prova small{color:#a9a9a9;grid-column:2/-1}
.ms-prova .ms-bar{grid-column:2/3}.ms-prova em{font-style:normal;color:#c0c0c0}
.ms-prova.is-ok b{color:#5fc85f}
.ms-foot{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:space-between;margin-top:8px}
.ms-foot .pf-note{flex:1 1 160px;margin:0}
/* Bonuses and cap */
.ms-sum{display:grid;gap:3px}
.ms-sum div{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;align-items:center;color:#c0c0c0}
.ms-sum b{color:#e8c547;font-weight:normal}
.ms-budget{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;margin-top:8px;color:#a9a9a9}
/* Diary */
.ms-kv{display:grid;gap:2px}
.ms-kv div{display:flex;justify-content:space-between;gap:8px;padding:2px 0;border-bottom:1px solid #2b2b2b}
.ms-kv span{color:#a9a9a9}.ms-kv b{color:#fff;font-weight:normal;text-align:right}
.ms-hist{display:flex;flex-wrap:wrap;gap:4px 10px}
/* Outcome over the profile: covers the screen, long names wrap, buttons wrap */
.ms-big{margin-bottom:2px}
#ms-outcome .ba-outcome{position:fixed}
#ms-outcome .ba-outcome-window{width:min(340px,100%)}
#ms-outcome .ba-outcome-banner{text-align:center}
#ms-outcome .ba-outcome-banner strong{font-size:16px;line-height:18px}
#ms-outcome .ba-outcome-actions{flex-wrap:wrap}
#ms-outcome .ba-outcome-actions button{flex:1 1 auto;min-width:0;white-space:normal}
/* Battle result: points of each member */
.ms-gains{margin:6px 0 0;padding:4px 6px;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a}
.ms-gains h4{display:flex;align-items:center;gap:4px;margin:0 0 4px;font:11px 'Tibia Pixel',Verdana,sans-serif;color:#c0c0c0;font-weight:normal}
.ms-gcat{margin-left:auto;display:inline-flex;gap:4px;align-items:center;color:#e8c547}
.ms-gain{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px;align-items:center;color:#c0c0c0}
.ms-gain b{color:#fff;font-weight:normal}.ms-gain small{display:block;color:#a9a9a9}
.ms-gain em{font-style:normal;color:#e8c547}
/* Hall da Fama */
dialog.window.ms-hall-modal{width:min(560px,calc(100vw - 16px))}
#ms-hall-body{padding:6px;max-height:calc(100vh - 90px);overflow:auto}
.ms-hall td small{display:block;color:#a9a9a9}
.ms-hall td:last-child{color:#e8c547;text-align:right}
.ms-first{color:#e8c547}
/* Market pedigree */
.ms-pedigree{display:block;color:#e8c547}
@media (max-width:520px){
 .ms-tier{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .ms-tn{grid-column:1/-1;display:flex;gap:6px;align-items:baseline}
 .ms-tier.is-legend .ms-opt{grid-column:1/-1}
}
@media (prefers-reduced-motion:no-preference){.ms-bar i{transition:width .3s}}
/* Profile tabs: five, Maestria last; on a phone three on top and two below */
#detail .profile-nav{grid-template-columns:.9fr 1.1fr .6fr 1.6fr 1.2fr}
@media (max-width:520px){
 #detail .profile-nav{grid-template-columns:repeat(6,minmax(0,1fr))}
 #detail .profile-nav button:nth-child(-n+3){grid-column:span 2}
 #detail .profile-nav button:nth-child(n+4){grid-column:span 3}
}
/* Panel headers: the detail goes to the right, as in the other screens; hidden on a narrow phone if it does not fit */
#ms-tab .pf-head small,.ms-hall-modal .pf-head small{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#ms-tab .pf-head{overflow:hidden}